почему img в h2 вызывает дополнительный верхний отступ на другом дисплее: таблица divs - PullRequest
Новая
       8

почему img в h2 вызывает дополнительный верхний отступ на другом дисплее: таблица divs

1 голос
/ 21 марта 2012

Это выглядит одинаково в Chrome и FireFox, так что, возможно, это намеренное поведение, но оно выглядит довольно странно. Помещение изображения в тег h2 в верхней части div с помощью «display: table-cell» приводит к дополнительному заполнению верхней части других div-элементов таблицы, примерно того же размера, что и изображение.

Вот мой тестовый код: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Chrome Test</title>

<style>
#col3 {
display:table;
border:1px solid black; 
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>

</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
    <div>
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    <div>
        <h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
        <p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
    </div>
    <div>
        <h2>Heading 2</h2>
        <p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
    </div>
</div>
<h2>Right</h2>
<div id="col3">
    <div>
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
    </div>
    <div>
        <h2>Heading 2</h2>
        <p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
    </div>
    <div>
        <h2>Heading 2</h2>
        <p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
    </div>
</div>
</body>
</html>

Это ошибка? Можно ли избежать этого поведения?

Ответы [ 5 ]

1 голос
/ 21 марта 2012

На основе вашего кода я создаю скрипку ниже -

Скрипка: http://jsfiddle.net/TtYn3/

Демо: http://jsfiddle.net/TtYn3/embedded/result/

В соответствии с требуемым изображением в теге H2 и проблемой заполнения, решаемой в других столбцах.

1 голос
/ 21 марта 2012

Тег h2 является блочным элементом и может иметь некоторые отступы по умолчанию, назначенные ему браузером.Не забудьте включить файл сброса CSS (например, этот ), чтобы удалить это нежелательное форматирование.

0 голосов
/ 22 марта 2012

Ваши div - это ячейки таблицы, и вы нигде не устанавливаете вертикальное выравнивание, поэтому все заканчивается выравниванием по базовой линии. Базовая линия ячейки - это нижняя часть первой строки текста (более или менее), поэтому нижние строки первых строк оказываются вертикально выровненными друг с другом. Если линии имеют очень разную высоту (как в этом случае, потому что изображение дает своей линии восхождение 80 пикселей), вы получите белые пробелы над более короткими линиями.

Если вы не хотите, чтобы ячейки выравнивались по базовой линии, установите их выравнивание по вертикали на любое желаемое значение (звучит как top в вашем случае).

0 голосов
/ 21 марта 2012

H-теги и P-теги всегда имеют верхний и нижний отступы / поля по умолчанию, и это зависит от браузера. Я всегда устанавливаю для них класс и устанавливаю поле равным 0, а отступ - 0, если только я не ищу некоторый интервал, в этом случае я буду устанавливать свой собственный с помощью css.

0 голосов
/ 21 марта 2012

Поскольку вы установили отображение в ячейку таблицы, ваши div будут вести себя так же, как в таблице, и будут растягиваться до высоты вашего самого высокого div (в каждом случае div с изображением внутри <h2>.

Во-вторых, вы используете <div id="col3">. Идентификатор должен использоваться в CSS только тогда, когда вы вызовете этот CSS только один раз. Вы должны назначить col3 классу вместо id, чтобы он мог бытьиспользуется снова и снова на вашей странице.

Если вы удалите атрибуты display: table и table-cell, ваши div-элементы должны сжаться до их правильных размеров.

Кроме того, display: table-cell hasне работает в IE6 или IE7 (в наши дни это не так уж и сложно, но все же).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...