Тег p включает h1, если внутри того же раздела

0

Я несколько раз сталкивался с этой проблемой, и мне хотелось бы знать, почему браузеры интерпретируют header внутри тега p. Это нарушает компоновку, поскольку элементы имеют маржу, применяемую к ней, поэтому она всегда нуждается в некоторых настройках.

Если я проверяю элемент, я вижу следующее: Изображение 174551

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

Если я выбираю заголовок с инспектором, я получаю следующее: Изображение 174551

Заголовок выбирается только. Мой макет разбивается, поскольку поле абзаца делает больше пространства над заголовком. Почему это происходит?????

Ниже вы можете увидеть мой 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>
  • 0
    возможный дубликат стеков маржи друг на друга?
  • 0
    Если я помещу ваш HTML в js fiddle, то не смогу заставить его думать, что заголовок в абзаце ... jsfiddle.net/ZvqWH . Если вы можете создать там что-то, что демонстрирует вашу проблему, то это поможет отладить это. Для начала отмечу, что содержание HTML-кода отличается от того, что показано на скриншотах (текст над ним отличается). У вас есть сценарий или что-то подобное, чтобы показать или скрыть или иным образом изменить ваш контент?
Показать ещё 2 комментария
Теги:
cross-browser
margin

1 ответ

1
Лучший ответ

У вас проблемы с вашим CSS. В HTML нет ничего плохого. Вы, должно быть, применили стиль float к h1 где-то.

Проверьте последний тег H1: http://jsfiddle.net/BQp2A/

  • 0
    Я все еще должен учиться у плавающих элементов ... Это как h1 вынут из потока? В качестве абсолютного положения. это правильно?
  • 0
    Да уж. Плавающий элемент действует так, как если бы он не занимал высоту в указанном месте. Для того, чтобы решить , что либо удалить плавающий стиль или положить clear:both к p справа под.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню