Почему нижние отступы и нижние поля не помогают добавить вертикальное расстояние между этими ссылками? - PullRequest
Новая
       8

Почему нижние отступы и нижние поля не помогают добавить вертикальное расстояние между этими ссылками?

4 голосов
/ 16 июля 2009

У меня есть div с ссылками в нем. И я выстроил их один над другим с помощью тегов <br>, потому что я не мог понять, как добавить вертикальный интервал с помощью CSS. Я попытался добавить нижнее поле и нижний отступ к правилу стиля, но, похоже, это не дало никакого эффекта (почему?). Я мог бы добавить еще один тег <br>, чтобы разделить их больше, но я должен предположить, что есть более хороший способ сделать это с помощью CSS, который я просто не смог понять. 

<!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>

Ответы [ 4 ]

9 голосов
/ 16 июля 2009

Вертикальное поле и отступ работают только на таких элементах уровня блока, как div и p. a - встроенный элемент, поэтому он не будет работать.

Для того, чтобы делать то, что вы хотите, вам нужно добавить следующий стиль в ваши ссылки: 

display:block;

только тогда поля и пейджинг для верха и низа будут применены правильно

РЕДАКТИРОВАТЬ: если вы сделаете это таким образом, вы также можете избавиться от <br/> тегов

1 голос
/ 16 июля 2009

Чтобы добавить вертикальный интервал, вы можете сделать это: 

#linksinner
{
    line-height: 150%;
}

Поля не будут влиять на <a> элементы, потому что они встроены. Альтернативное решение - сделать их: 

display: block;

что означало бы, что они уважают вашу прибыль, и тогда вам не понадобятся ваши <br> с.

0 голосов
/ 16 июля 2009

Вам нужно указать отступы или поля для тегов привязки, а не для div. Но на самом деле не делайте этого, вместо этого: 

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

и дайте p's padding-bottom или padding-top.

0 голосов
/ 16 июля 2009

У ссылок не могут быть определены поля, потому что по умолчанию они являются «встроенными» элементами. На встроенные элементы нельзя применять правила полей или ширины. Чтобы позволить встроенным элементам применять эти вещи, вам нужно добавить еще одно свойство в ваше правило.

Попробуйте это: 

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

Я думаю, что для того, что вы хотите сделать, вы должны использовать список: 

<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>

Затем вы можете применить свои поля или правила заполнения к тегам <li />. Если вы не хотите, чтобы появлялись маркеры, используйте: 

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