Высота h1 в зависимости от тега

Общее
1

Обнаружил что тег article влияет на высоту h1. Так и должно быть?

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div class="out_contacts">Контакты: mail@example.com</div>
	<div class="text">
		<h1>Создание сайтов - портфолио</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin ultrices dictum. Nullam non diam vestibulum, interdum nibh quis, sollicitudin sem. Vivamus sit amet sagittis massa. Cras aliquet lacus at interdum blandit. Quisque quis tellus nunc. Cras at nisi laoreet, suscipit nibh quis, pellentesque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam a bibendum orci. Sed fermentum consequat mauris adipiscing condimentum. Phasellus id convallis nunc. Nullam vel mollis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras nec neque vel risus accumsan sollicitudin quis ut velit. Fusce et libero hendrerit, accumsan enim non, dictum eros. Proin sem justo, porta id magna quis, consequat scelerisque urna.</p>
	</div>	
</body>
</html>

body {
	margin: 0; 
	color: #76214B;
}

h1 {
	margin: 0;
	color: #B43273;
}

.out_contacts {
	position: fixed;
	left: 0;
	bottom: 0; 
	width: 100%;
	height: 50px;
	background-color: #B43273;
	text-align: center;
	line-height: 50px;
	font-size: 21px;
	color: white;
	border-top: 1px solid #76214B;
}

.text {
	width: 600px;
	margin: 10px auto 60px;
	padding: 20px;
	border: 1px solid #B43273;
	border-radius: 20px 20px 0px 0px;
}

Получается вот так
image

Если же написать так
<article class="text">
То получается изменение h1
image

2

Да, так и должно быть. Заголовок внутри article считается ее структурной частью, а не частью страницы в целом.
Статья в тему (на английском).
Здесь вы можете сравнить, как считается уровень заголовка с div и article.

1 лайк