HTML Strict & CSS: как мне сократить разрыв? - PullRequest
Новая
       10

HTML Strict & CSS: как мне сократить разрыв?

4 голосов
/ 04 марта 2009

На следующей веб-странице есть промежуток в несколько пикселей между изображением и div. (Я тестировал в Firefox 3 и Safari 4.)

Как я могу закрыть разрыв? 

body {
  background-color: black;
}

img {
  width: 250px;
  height: 70px;
  border: 0;
  margin: 0;
  padding: 0;
}

div {
  background-color: white;
  border: 0;
  margin: 0;
  padding: 0;
}
<html>

<head>
  <title>Test Page</title>

</head>

<body>

  <img alt="Stack Overflow Logo" src="data:image/png;base64,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">
  <div>text</div>

</body>

</html>

Ответы [ 6 ]

16 голосов
/ 04 марта 2009

Изображение является встроенным элементом, поэтому оно размещается на базовой строке текстовой строки. Разрыв - это расстояние между базовой линией и нижней частью текстовой строки (т. Е. Пространство, необходимое под базовой линией для подвешивания таких символов, как «g» и «j»).

Сделайте изображение блочным элементом, и разрыв исчезнет: 

 display: block;
5 голосов
/ 04 марта 2009

Удалите разрыв строки между тегом изображения и тегом div.

3 голосов
/ 04 марта 2009

Добавьте display: block к вашему <img> в CSS или в атрибуте стиля.

Редактировать Гуффа опередил меня.

Вы также можете обернуть <img> с <div>, что технически говоря, в этом случае вы должны делать в любом случае. Только элементы уровня блока могут быть потомками <body>, если я правильно помню спецификации HTML. Затем у вас есть возможность добавлять больше изображений в этот div (при условии, что между закрытием <img> и </div> нет пробела, вам будет хорошо.

2 голосов
/ 04 марта 2009

Удалить новую строку в HTML между строкой <img> и строкой <div>.

Почему да, досадно, что HTML обрабатывает символы новой строки как пробелы.

1 голос
/ 04 марта 2009

Изменение: 

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE">
<div>text</div>

Кому: 

<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"><div>text</div>
0 голосов
/ 03 июня 2009

блок отображения не работает для меня, но это работает. Присвойте ему отрицательное значение маржи - Действительный CSS 

img {
width : 250px;
height : 70px;
border : 0;
margin-top : -11px;
margin-left : -22px;
padding : 0;
}

отрегулируйте при необходимости.

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

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

...