Warum helfen der untere und der untere Rand nicht, den vertikalen Abstand zwischen diesen Links zu erhöhen?

Ich habe ein div mit Links drin. Und ich ordne sie mit <br> Tags übereinander, weil ich nicht herausfinden konnte, wie man vertikalen Abstand mit CSS hinzufügt. Ich habe versucht, einen unteren Rand und einen unteren Rand der Stilregel hinzuzufügen, aber es schien keinen Effekt zu haben (warum?). Ich könnte ein weiteres <br> Tag hinzufügen, um sie mehr zu trennen, aber ich muss annehmen, dass es eine schönere Möglichkeit gibt, dies mit CSS zu tun, das ich gerade nicht herausgefunden habe.Warum helfen der untere und der untere Rand nicht, den vertikalen Abstand zwischen diesen Links zu erhöhen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
html, body 
{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-weight:normal; 
    font-size:12pt; 
    font-family: Verdana, Arial, Helvetica, serif, sans-serif; 
    background:lime; 
} 

#linksouter 
{ 
    margin: 0; 
    padding: 0; 
    border-style:solid; 
    border-width:0px; 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    width: 80px; 
    background: blue; 
    text-align:left; 
} 
#linksinner 
{ 
    margin: 80px 0 0 .5em; 
    width:100%; 
    background:fuchsia; 
    display:inline; 
    height:100%; 
} 
#linksinner a 
{ 
    color:red; 
    text-decoration: none; 
    background:yellow; 
} 
</style> 
</head> 

<body> 
<div id="linksouter"> 
    <div id="linksinner"> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    <a href="#">1</a><br /> 
    </div> 
</div> 

</body> 
</html>

Quelle

2009-07-16 gday

Vertikaler Rand und Padding funktioniert nur auf Blockelemente wie div und p. a ist ein Inline-Element, so dass es nicht funktioniert.

Um das zu tun, was Sie wollen, müssen Sie die folgende Art Ihren Link hinzuzufügen:

display:block;

nur dann Marge und Paging für oben und unten

EDIT korrekt angewandt erhalten: Wenn Sie es auf diese Weise tun, können Sie auch die <br/> Tags

Quelle

2009-07-16 00:18:01

Ich wollte gerade sagen, dass ... – jeroen

dann stimmen wir zu :) –

Warum würden Sie a-Tags zu Block-Elemente machen, nur um sie vertikal zu trennen? Sie in einem Block-Element einzuschließen, ist imho angemessener. – stefanw

vertikalen Abstand hinzuzufügen, können Sie dies tun:

#linksinner 
{ 
    line-height: 150%; 
}

Margen haben keine Auswirkungen auf <a> Elemente, weil sie inline sind. Eine alternative Lösung besteht darin, sie zu machen:

display: block;

was bedeuten würde, sie Ihre Margen respektiert werden, und Sie würden dann nicht Ihre <br> s benötigen.

Quelle

2009-07-16 00:17:18 RichieHindle

loslassen Links können keine Ränder definiert werden, da sie standardmäßig "Inline" -Elemente sind. Inline-Elemente können keine Rand- oder Breitenregeln haben. Damit Inline-Elemente diese Dinge anwenden können, müssen Sie Ihrer Regel eine weitere Eigenschaft hinzufügen.

Try this:

#linksinner a { 
    display: inline-block; 
    /* Add your margin or height rules here */ 
}

Ich denke, für das, was Sie suchen zu tun, sollten Sie jedoch eine Liste verwenden:

<ul id="linksinner"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">1</a></li> 
<ul>

Anschließend können Sie Ihre Marge oder padding Regeln gelten für die <li /> Tags. Wenn keine Aufzählungszeichen angezeigt werden sollen, verwenden Sie:

#linksinner li { list-style-type: none}

Quelle

2009-07-16 00:20:23

dies funktioniert nicht über den Browser. Um Inline-Block korrekt in allen Browsern anzuzeigen, gibt es einen Hack, aber es ist nicht so einfach wie Sie es haben. –

Warum funktioniert das nicht über den Browser? Es wird in jedem großen Browser unterstützt: http://www.quirksmode.org/css/display.html –

der Link, den Sie zur Verfügung stellen, sagt die Unterstützung ist unvollständig für IE6 und 7 und keine Unterstützung überhaupt in FF2. Ich bin mir nicht sicher, wie Sie daraus ableiten können, dass es in jedem größeren Browser funktioniert ... –

-1

Sie müssen den Anker-Tags eine Auffüllung oder einen Rand geben, nicht die Divs. Aber eigentlich nicht, tun Sie das stattdessen:

<p><a href="#"></a></p>

und geben Sie den p ist ein Padding-Bottom oder Padding-Top.

Quelle

2009-07-16 00:21:21 stefanw

Warum helfen der untere und der untere Rand nicht, den vertikalen Abstand zwischen diesen Links zu erhöhen?

Antwort

Verwandte Themen