HTML / CSS: дочерний элемент переполняется из родительского div.Как вы делаете div все охватывающим дочерний контент?

Question

В в этом примере вы видите, что содержащий div имеет красную рамку.Тем не менее, вы также заметили, что дочерние области перекрывают границы родительского элемента div.Почему это так и как это можно исправить, чтобы содержащийся div охватывал все содержимое промежутков?

Answer 1

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

<div class="entry-utility">
  <span>
    <h2><a href="#" title="##" rel="bookmark">New Design For Keep Skatin’ Bro</a></h2> 
    Posted in <a href="#" title=" " rel="category tag">Animation</a>, 
    <a href="#" title=" " rel="category tag">Photography</a>, 
    <a href="#" title=" " rel="category tag">Uncategorized</a>, 
    <a href="#" title=" " rel="category tag">Videography</a>, 
    <a href="#" title=" " rel="tag">Joe Pea</a>, 
    <a href="#" rel="tag">Raquel Pea</a>, 
    <a href="#" rel="tag">test</a> on <a href="#">May 27, 2011</a>.
  </span>                                            
</div><!-- .entry-utility -->

Это неверный HTML , поскольку у вас есть h2, вложенный в (inline) span span не будет содержать границ и отступов - но для того, чтобы показать, как это на самом деле влияет на отображение CSS, если вы сделаете .entry-utility span {display: block;}, который должен получить красную рамку, содержащую, как вы хотите ... но я думаюЯ бы предпочел исправить вложение, так как слишком много принудительного позиционирования тоже происходит.

Хотя вы сделали h2 display: inline;, чтобы он отображался как встроенный элемент, вы не можете изменить природуэлемент, он остается элементом уровня блока.

Answer 2

Изменение line-height на 22px для .entry-utility, кажется, помогает.

Демо: jsfiddle.net / 7mnP3