Почему td добавляет дополнительное дополнение в таблицу?

<html> 
 
<body style="background:grey;"> 
 
    <table width="500" border="0" cellpadding="0" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td style=" 
 
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png); 
 
    height: 9px; 
 
"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style=" 
 
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png); 
 
    height: 9px; 
 
"></td> 
 
    </tr><tr> 
 
     <td><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body></html>

Я не понимаю, почему высота третьего почтового индекса изображения 18. В основном, когда я добавить изображение в качестве фона, нет никакого зазора между каждой строки (нет зазора между рядами 1 и строка 2). Однако, когда я использую тег изображения, он создает разрыв между строками 2 и строкой 3. Я не понимаю, почему. Есть идеи? А также как я могу удалить промежуток между строкой 2 и там.

источник

2017-02-02 Haoyu Chen

Наконец, после получения понимания от других разработчиков, я обнаружил, что я мог бы решить это, просто добавляя 'VALIGN =«сверху»' в IMG тег. Я работаю над добавлением шаблона для электронной почты. Так что это может быть лучшим ответом из-за ограничения. –

<img> считается встроенным по умолчанию, так что, как и другие встроенные элементы, он имеет высоту линии и пространство для descenders. Пространство Descender - это небольшое заполнение под каждой строкой, которая нигде не учитывается, для зависания бит букв, как в «p» или «q».

Если вы установите его на display: block, все будет щелкать вместе.

источник

2017-02-02 02:30:32 ppajer

Все, что добавлено через CSS, не считается «содержимым» браузером.

Единственная причина, по которой вы видите первые две строки, состоит из height:9px; CSS. Если вы удалите это, вы увидите, что строки не отображаются (высота 0), это связано с тем, что строки не содержат никакого содержимого, поэтому они полагаются на CSS, чтобы указать их размеры.

Поскольку последний <td> имеет контент в теге <img ..., он отображает изображение со стандартным интервалом между таблицами, поскольку это не было отменено никаким css.

источник

2017-02-02 02:22:34 Jake

Но почему высота последнего 'td'' '9px'? Даже когда я устанавливаю высоту как «9x» для последней, она по-прежнему сохраняет ее как «18px» –

. Высота последней (по крайней мере, от исходного кода) не имеет CSS, применяемого к ней. И как объяснено лучше by @RizJa '' 's наследует значения по умолчанию, если ничего не указано. Эти значения можно увидеть на вкладке «Вычисление» инструментов разработчика браузера. – Jake

A <td> тег по умолчанию наследует display:table-cell; как стиль. Чтобы устранить это, просто переопределите это значение flex.

<html> 
 
<body style="background:grey;"> 
 
    <table width="500" border="0" cellpadding="0" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td style=" 
 
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png); 
 
    height: 9px; 
 
"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style=" 
 
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png); 
 
    height: 9px; 
 
"></td> 
 
    </tr><tr> 
 
     <td style="display:flex;"><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body></html>

источник

2017-02-02 02:32:23 RizJa

Почему td добавляет дополнительное дополнение в таблицу?

ответ

Смежные вопросы