Блог

Главная - Вопросы по программированию - Пробелы, отображаемые, но не записанные

Пробелы, отображаемые, но не записанные

#html #css

#HTML #css

Вопрос:

Я получил код:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">
* {padding: 0px;margin: 0px;}
body {width:100%}
img.logo{width:80%;margin-left:10%;margin-right:10%;}
div.down{width:80%;margin-left:10%;margin-right:10%;}
.bar{width:10%; height:100%; float:left}
.cent{width:80%; float:left}
</style>

<body>
<img class="logo" src="logo.gif"/>
<div class="down">
<img class="bar" src="bar.jpg"/>
<div class="cent">lol</div>
<img class="bar" src="bar.jpg"/>
</div>

</body>

</html>

Однако между логотипом и нижним разделом я получил пробел. И вот мой вопрос: как это туда попало? (мои изображения без белых границ)

Комментарии:

1. Тег <style> должен находиться внутри тега <head> . Где ваш тег <head>?

Ответ №1:

Дело в том, что ваше изображение является встроенным элементом, если вы хотите скрыть пробел, добавьте к нему инструкцию display: block, также на это влияет режим отображения браузера

http://www.quirksmode.org/css/modes/imgdisplay_quirks.html

Комментарии:

1. 1 армондж, опереди меня в этом. Заметка для себя: улучшите подключение к Интернету 😉

Ответ №2:

Добавьте display:block в свой img :

 img.logo { width:80%; margin-left:10%; margin-right:10%; display: block; }