Простой CSS Плавающий Extra Space

Question

В этой ссылке: http://css.maxdesign.com.au/floatutorial/introduction18.htm

Если вы идете в манипуляции DOM и выключить черную окантовку .containingbox, вы увидите, что <p> элемент идет прямо туда, где она должна быть плавали рядом с площадью. Я понимаю, что из-за границы .containingbox элемент <p> может быть немного опущен, но, похоже, он помещается в точку, где я что-то не понимаю.

Просто хочу немного понять и полностью понять это. Спасибо.

Answer 1

Когда нет границы на .contaningbox, поля h1 и p элементов разрушаются. Вы можете узнать больше о margin collapsing.

Желтая область показывает разницу здесь.

Элемент p имеет значение по умолчанию для таблицы стилей пользователя. Если вы обнулите маржу, проблема будет решена.

Answer 2

Это происходит из-за развала маржи. Если вы добавите следующее, заполните его, исправьте вопрос

p.highlight { 
    margin: 0; /* Added this */ 
    padding: 0 /* Added this */ 
    border: 5px solid #aaa; 
}