css child padding заставляет его вытягивать сторону родителя

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

если мы увеличиваем заполнение, почему бы и родительский размер не изменился до накопительного размера всех дочерних элементов с учетом размера заполнения дочерних элементов.

http://jsfiddle.net/NkXUW/4/

 div { margin-top:90px; margin-left:90px; background-color:#676896; } ul { list-style-type:none; } ul li { display:inline-block; } a { background-color:#c34567; padding:10px 10px 10px 10px; } 

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

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

причина, по которой ребенок перечеркивает границы родителя, состоит в том, что дочерний элемент является тегом типа который по умолчанию display:inline (вы можете видеть, что вы идете в хром-инструментах разработчика и смотрите в вычисленном стиле). встроенный элемент отображается как строка текста .. так, как он обрабатывает ширину и высоту, и все, что сильно отличается от блока (например, div является блоком по умолчанию).

что, если вы измените настройку отображения a для display:inline-block вы получите, чтобы сохранить встроенные свойства но в то же время также получить свойства блока, а именно иметь отступы, ширину и высоту признанный его родительским узлом, который затем будет расширяться для его размещения.

Таким образом, в этом нет никакой лучшей практики. Единственная лучшая практика заключается в том, чтобы понять, что означает каждое свойство отображения (т. inline vs block vs inline-block ) и использовать его для правильного использования.

Использовать display:inline-block;

 a { background-color: #C34567; display: inline-block; padding: 10px; } 

СМОТРЕТЬ ДЕМО

  • Встроенный элемент не имеет прерывания строки до или после него, и он переносит элементы HTML рядом с ним.
  • Элемент блока имеет некоторые пробелы выше и ниже него и не переносит никаких элементов HTML рядом с ним.
  • Элемент встроенного блока помещается как встроенный элемент (в той же строке, что и смежный контент), но он ведет себя как элемент блока.

http://www.w3schools.com/cssref/pr_class_display.asp

Может быть решена без внесения каких-либо изменений в тег. Просто добавьте overflow: hidden; свойство для элемента div .

 div { margin-top:90px; margin-left:90px; background-color:#676896; overflow: hidden; /*expends its height if not fixed*/ } 

Обновлена ​​скрипка здесь: http://jsfiddle.net/NkXUW/52/

Вы должны добавить display: block; для элемента для расширения родителя по мере необходимости. Смотрите эту скрипку

о разном между маржи и пробелом, пожалуйста, прочитайте это, возможно, это поможет вам

Я не думаю, что это правильно float вашей div wrapper

рабочая демонстрация

 div { float:left; margin-top:90px; margin-left:90px; background-color:#676896; } 

надеюсь, это поможет вам ..