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

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

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

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

 <div>
       <ul>
          <li><a>srikanth</a>
           </li>
           <li><a>sunkist</a>
        </li>
        <li><a>sunday</a>
        </li>
    </ul>
    </div>



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

Каковы методы кодирования, которые мы должны рассмотреть, чтобы решить эту проблему.?

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

Ответы

Ответ 1

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

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

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

Ответ 2

Используйте display:inline-block;

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

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

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

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

Ответ 3

Может быть решена без каких-либо изменений в теге a. Просто добавьте свойство 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/

Ответ 4

Вы должны добавить элемент display: block; в <a>, чтобы развернуть родительский элемент по мере необходимости. Смотрите fiddle

Ответ 5

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

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

работает демо

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

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