Слишком много переполнения, похоже, добавляет отступ к элементу абзаца

Question

Я не могу понять, что вызывает это. Как вы можете видеть в here (JSFiddle), когда я добавляю переполнение: скрытое (или отображение: inline-block или float: left) кажется, что добавляет верхний и нижний отступы в абзац, перемещающийся вниз. Может кто-нибудь объяснить, что это вызывает?

.container{ 
 
    background-color: blue; 
 
    width: 200px; 
 
    height:200px; 
 
    float: left; 
 
    margin: 0.5%; 
 
    overflow: hidden; 
 
} 
 

 
.problem{ 
 
    background-color: rgba(52, 152, 219, 0.8); 
 
    width: 100%; 
 
    height: 15%; 
 
    font-size: 120%; 
 
    color:white; 
 
    margin-top: 55%; 
 
    overflow: hidden; 
 
    vertical-align:bottom; 
 
}

<div class="container"> 
 
    <div class="problem"><p>text</p></div> 
 
</div>

Answer 1

В вашем примере, вы видите эффект разрушающихся краев и блока форматирование контекстов.

При добавлении свойства overflow: hidden к .problem, элемент устанавливает новый формат форматирования блока.

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

Без свойства overflow: hidden значения поля p обрушиваются на с положением 55% родительского блока.

Дополнительные сведения о контекстах форматирования блока, см спецификации CSS2 по адресу:

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Answer 2

Большинство браузеров имеют некоторые CSS автоматически включены.

Добавьте это, чтобы очистить поля абзаца по умолчанию:

p { margin:0px; } 

http://jsfiddle.net/stsrjnxk/16/

Для получения дополнительной информации Google: CSS Reset