Нежелательные пространства при использовании дисплея: встроенный блок

я создал супер простой HTML и CSS файл, чтобы проверить дисплей: встроенный блок, но когда я проверить это есть некоторые нежелательные зазоры между коробками ...
Html:Нежелательные пространства при использовании дисплея: встроенный блок

<!doctype html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="Mall.css" rel="stylesheet" /> 
</head> 
<body> 
    <div style="background-color:red;"></div> 
    <div style="background-color:blue;"></div> 
    <div style="background-color:green;"></div> 
    <div style="background-color:yellow;"></div> 
</body> 
</html>

CSS:

body { 
    padding: 0px; 
    margin: 0px; 
    width: 100%; 
} 

div { 
    display: inline-block; 
    margin: 0px; 
    padding: 0px; 
    width: 50px; 
    height: 50px; 
}

Я удалил все Прокладки и поля от Div теги и тела тега, однако, когда я запустить HTML в хроме он производит этот результат: это 3 пикселей между divs и 5 pixe л beneth их таким образом, общая высота тела составляет 55 пикселей, когда оно должно быть только 50.

imgur

Я нашел странный способ, чтобы исправить это, которое заставляет меня думать, что это проблема с веб-браузера а не код, если я изменил CSS на display: block, он покажет мои divs как обычно в диагональной линии и без каких-либо странных пространств между ними. Теперь, если я открою инструменты разработчика в хроме и измените отображение в стиле одного из divs на встроенный блок, все они выстраиваются горизонтально и без каких-либо нежелательных пробелов.

image-tag

Кто-нибудь есть какие-либо идеи, почему он ведет себя так, как это?

источник

2013-12-16 user3107082

http://davidwalsh.name/remove-whitespace-inline-block – Danield

'font-size: 0' to parent div решит эту проблему. –

Крис coyier имеет ряд решений для борьбы с этим белым пространством здесь: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

источник

2013-12-16 12:47:56 jessh

* «Всегда указывайте наиболее важную часть важной ссылки, если целевой сайт недоступен или постоянно отключен». * - http://stackoverflow.com/help/how-to-answer – Jarno

Вы должны удалить пробелы между div закрытия и открытия.

HTML:

<div style="background-color:red;"></div><div style="background-color:blue;"></div><div style="background-color:green;"></div><div style="background-color:yellow;"></div>

CSS:

body { 
    padding: 0px; 
    margin: 0px; 
    width: 100%; 
} 

div { 
    display: inline-block; 
    margin: 0px; 
    padding: 0px; 
    width: 50px; 
    height: 50px; 
}

fiddle

источник

2013-12-16 12:50:12 Parixit

короткий ответ:

изменить ваш HTML код из

<body> 
    <div style="background-color:red;"></div> 
    <div style="background-color:blue;"></div> 
    <div style="background-color:green;"></div> 
    <div style="background-color:yellow;"></div> 
</body>

<body> 
    <div style="background-color:red;"></div><div style="background-color:blue;"> 
    </div><div style="background-color:green;"> 
    </div><div style="background-color:yellow;"></div> 
</body>

это как рядный себя элементы. т. Е. У вас не должно быть пробелов между ними в коде, чтобы они не отображали пробелы/поля при визуализации.

источник

2013-12-16 12:50:17 gaurav5430

Нежелательные пространства при использовании дисплея: встроенный блок

ответ

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