Интервал между делениями - PullRequest
Новая
       7

Интервал между делениями

4 голосов
/ 09 ноября 2011

Вот как выглядит моя проблема:

div spacings

Как вы можете видеть, есть 3 изображения (деления), и я не хочу удалять эти черные промежутки междуКаждое деление.

Самое главное, что, когда я помещаю в свой CSS следующее: 

* {
padding: 0;
margin: 0;
}

Тогда это выглядит хорошо:

Working example

Проблема в том, что я не могу использовать padding: 0 и margin: 0 для всего моего html, потому что тогда другие атрибуты будут нарушены ...

Я пытался добавить: padding:0 и margin:0 на каждом div (изображении), но это не работает.

Источник HTML: 

<div id="sidebar-left" class="sidebar" role="complementary">
       <div class="sb-ui sb-title"><h3>Account</h3></div>
       <div class="sb-con">
            <ul>
        <li><a href="index.php?subtopic=accountmanagement">My Account</a></li>
                <li><a href="index.php?subtopic=accountmanagement&action=logout">Logout</a></li>
            </ul>
       </div>
       <div class="sb-ui sb-end"></div>
</div>

Мой CSS: 

#sidebar-left {
margin-right: 9px;
}

.sidebar {
width: 170px;
position: relative;
bottom: 7px;
}

.sidebar, #content {
float: left;
}

.sb-title {
height: 60px;
text-align: center;
}

.sb-ui {
background: url("../images/ui/sidebar_ui.png");
}

.sb-con {
background: url("../images/ui/sidebar_bgrepeat.jpg") repeat-y;
}

.sb-end {
height: 23px;
background-position: bottom center;
margin-bottom: 10px;
}

.sb-ui {
background: url("../images/ui/sidebar_ui.png");
}

Все попытки помощибудет оценено.

Ответы [ 2 ]

7 голосов
/ 09 ноября 2011

Вероятно, это обусловлено полем ul. 

.sb-con ul { padding:0; margin:0; }

может иметь желаемый эффект. li также может влиять на макет; но мы не можем сказать из вашего предоставленного кода.

Ваш сброс "все" удаляет поля / отступы по умолчанию; следовательно, почему это выглядит хорошо.

Изменить - вашему .sb-title h3 также может потребоваться удалить нижнее поле, так как похоже, что вы используете фиксированную высоту (60 пикселей), но поле по умолчанию добавит дополнительную высоту.

Это легко отладить с помощью firebug или веб-инспектора Chrome с визуальной индикацией того, откуда происходит расстояние.

1 голос
/ 09 ноября 2011

Это из-за маржи по умолчанию UL.Вам нужен стиль: 

UL { margin: 0 }
...