Привет.
<!DOCTYPE HTML>
<html>
<head>
<style>
p:first-child{
border:5px solid gold;
background-color:yellow;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
text-align:center;
height:100px;
}
body{border:5px solid red;
background-color:blue;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
html{border:5px solid green;
background-color:black;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height:300px;
}
</style>
</head>
<body>
<p>
<strong>Hello</strong>
</p>
</body>
</html>
Я задал элементу хтмл высоту 300 пикселей и зеленую рамку. зеленая рамка как раз и отрисовалась под эту высоту, а черный фон почему-то выпер (на всю страницу вылез) за пределы рамки, хотя фон должен внутри находиться.
Высота блочного элемента определяется содержимым. на это и рамка зеленая указывает, а черный фон должен быть в пределах рамки. Не понятно. Если отключить эти стили для элемента хтмл, то окажется, что для элемента боди ситуация такая же - синий фон выперает (на всю страницу) за пределы блока с красной рамкой. Тоже непонятно. Для всех других элементов все окей - фон находится в пределах рамки (бордера) блочного элемента.
Простой
