Может ли кто-нибудь объяснить падение полей? Я нахожу их чрезвычайно раздражающими

Question

У меня есть div, который содержит ссылку:

<div id="like_bar"><a href="#" onclick="return false;" id="like"></a></div>

С некоторыми CSS:

#like_bar{
    width:140px;
    height:26px;
    background:url('bar.jpg');
}
#like{
    display:block;
    width:20px;
    height:20px;
    margin:3px 36px;
    background:url('mini_img.png');
}

Ссылка размещается в верхней части панели, а поля ссылки применяются к панели.
Это раздражает.

---

Может ли кто-нибудь объяснить эти разрушающиеся поля, как их избежать и для чего они используются.

Answer 1

Есть много способов «исправить это».

Возможно, самым простым для вас будет это:

#like_bar {
    overflow: hidden
}

Другие способы включают в себя:

• Добавьте немного padding
• Добавьте border (даже border: 1px solid transparent достаточно)
• float элемент
• position: absolute
• И, как в приведенном выше фрагменте, установите для overflow значение, отличное от значения по умолчанию visible.

---

Вы также спросили:

чтоони используются для

Обычным случаем использования является тег <p>.

См .: http://jsfiddle.net/thirtydot/tPaTY/

Без разрушения полей некоторые вещи станутраздражает.

Answer 2

Поскольку я ленивый, я просто собираюсь сослаться на несколько ресурсов:

Мой ответ здесь объясняет, почему блочная модель такая, какая она есть, которая связана сВключается ограничение полей.

Спецификация w3c css определяет поведение сжатия полей.Это ожидаемое поведение для удобства, учитывая коробочную модель.Вам не нужно беспокоиться о двойных полях между блоками контента.То, на что похоже * на самом деле , - это некоторые отступы вокруг #like, а не на полях.

Думайте о CSS как о контентно-ориентированном подходе внутри → снаружи к стилизации, а не как к программированиюснаружи → в подходе.