!doctype Html Strict добовляет отступы

cx717 · March 9, 2008

Откуда взялся этот отступ?

Вот код:

Код:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title></title>
 <style type="text/css">
 div#box1{
 width:100px;
 height:100px;
 background-color:black;
 border:2px solid red;
 margin:0px;
 padding:0px;
 }
 img {
 margin:0px;
 padding:0px;
 border:0px;
 }
 </style>
</head>

<body>
 <div><img src="leftA.jpg" alt=""></div>
 <div id="box1"></div>
</body>
</html>

Вот как это выглядит:

http://a10vs1.fatal.ru/test/boxes2.html

Если доктип поменять на переходный, то черный квадрат прилипает

снизу к картинке (что собственно и нужно).

А в строгом html (тот который видно по ссылке) между

картинкой и квадратом появляется зазор.

Код проверялся на валидность в W3C - ошибок нет.

Подскажите пожалуйста как с этим бороться.

homm · March 16, 2008

Все просто, картинки выравниваются по так называемой baseline шрифта. Это не самая нижняя часть шрифта, за baseline выступают части букв ?урф??. В совместимом режиме на это закрываются глаза, если рядом с картинкой нет текста, а в строгом нет. Выровнять по низу очень просто.

<style type="text/css">
img.fix {vertical-align: bottom;}
</style>
<img class="fix" src="?" alt="" />

rash · March 16, 2008

Либо задать для картинки

display: block;

таким образом мы отучим ее вести себя как строчный элемент. Чаще использую именно этот способ.

homm · March 16, 2008

Либо задать для картинки
таким образом мы отучим ее вести себя как строчный элемент. Чаще использую именно этот способ.

Зачем делать картинку блочным элементом, если нам нужно избавится от отступа?

rash · March 16, 2008

Затем, что во многих случаях для картинки как раз логично вести себя как блочному элементу.

Если, конечно, она должна находиться непосредственно в тексте - другое дело, но здесь не тот случай.

С другой стороны, зачем нам устанавливать вертикальное выравнивание, если нам нужно избавиться от отступа? Все дело в том, что это не отступ...

Sign In

!doctype Html Strict добовляет отступы

Question

cx717

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information