Я несколько раз сталкивался с этой проблемой, и мне хотелось бы знать, почему браузеры интерпретируют header
внутри тега p
. Это нарушает компоновку, поскольку элементы имеют маржу, применяемую к ней, поэтому она всегда нуждается в некоторых настройках.
Если я проверяю элемент, я вижу следующее:
Тэг p
включает заголовок, как если бы он находился внутри тега p
.
Если я выбираю заголовок с инспектором, я получаю следующее:
Заголовок выбирается только. Мой макет разбивается, поскольку поле абзаца делает больше пространства над заголовком. Почему это происходит?????
Ниже вы можете увидеть мой html, который очень прост и понятен:
<section class="content">
<h1>Meet Sophie, our unique vision for design speakers</h1>
<p>Are you looking for high-performance design speakers that can provide a truly mesmerizing sound experience? If so, B.A.S. has the answer. We believe that speakers should create a comprehensive atmosphere. Thats why we design speakers that have the power to capture the imagination – both aurally and visually.
</p>
<p>Sophie is our first innovation, a set of thin-bodied design speakers with voluptuous curves and a remarkably strong voice. Explore our versatile sets and meet the beauty of sound in person.
</p>
<h1>The DD set: design speakers for studios and events</h1>
<p>Ever the optimal choice for studios, events and large spaces, our Sophie DD set consists of two perfectly balanced, artistic design speakers paired with two powerful subwoofers. Whether youre mixing, recording, performing or simply listening, these design speakers will always leave a lasting impression with any audience that hears and sees them.
<br>
[Explore the possibilities of our professional design speakers]
</p>
<h1>The DS-set: design speakers for powerful, centralized sound</h1>
<p>Dedicated spaces deserve dedicated sound. With the DS set of Sophie design speakers, youll be able to create a comprehensive experience in a wide range of specific scenarios – from listening rooms and media rooms to professional presentations, the twin Sophie design speakers and their single subwoofer companion will easily create the perfect soundscape.
<br>
[Create beautiful soundscapes with our versatile design speakers]
</p>
</section>
У вас проблемы с вашим CSS. В HTML нет ничего плохого. Вы, должно быть, применили стиль float
к h1
где-то.
Проверьте последний тег H1: http://jsfiddle.net/BQp2A/
clear:both
к p
справа под.