Зазор между div'ами при нулевом padding,margin,border

v.asya · August 29, 2010

Не очень понимаю откуда взялась такая проблема, поскольку раньше ее не встречалось.

Задача: требуется составить 3 блочных слоя в один ряд без зазоров, т.е.вплотную друг к другу.

Решение: делаю, как обычно. У каждого из трех: {width:100px; border: 0; padding: 0; margin:0; display: inline-block;}.И все прекрасно, но вместо 300 в сумме получаю по 3 дополнительных пикселя с каждой стороны у каждого дива.

В чем может быть дело? Не могу понять. Подскажите, пожалуйста.

swetlana · August 29, 2010

ну а, собственно, почему бы и не поиграться в телепата?

Хотя нет, не буду.

Покажите результат трудов своих, где такое происходит. А смотреть веб-инспектором (или на худой конец файербагом) куда лучше, чем пытаться угадать.

v.asya · August 29, 2010

Такое происходит в Мозилле 3.6 и в IE8.

В телепата играться не надо. Т.к. корректно не работает даже самый простой код вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

Kldj;glhkjsd;lghkjsH

</div>

l;kjd;lgkj;dlkfjh

</div>

sdflgjsdl;fjglsdkjg

</div>

</body>

</html>

Файл css выглядит следующим образом:

#o { width: 200px;

background: blue;

display:inline-block;

border:0;

padding:0;

margin:0x;}

#t { width: 200px;

background: red;

display:inline-block;

border:0;

padding:0;

margin:0;}

#d { width: 200px;

background: green;

display:inline-block;

border:0;

padding:0;

margin:0;}

Опытным путем только что было установлено, что нужно поправить: margin: 0 -2px 0 -2px;

Тогда все исправляется. Но что это за странный баг? Откуда ноги растут? Кто-нибудь знает?

И какова теперь ширина дивов? 200? Или 200-2-2=196?

Edited August 29, 2010 by v.asya

swetlana · August 29, 2010

Скажите, а чем всё-таки продиктовано использование display:inline-block? Таким оразом элемент принимает свойства как блочных, так и строчных элементов, в том числе и начинает учитывать пробелы. Чтобы он пробелы не учитывал, надо чтобы их не было, то есть, писать сплошным текстом:

<div id="o">Kldj;glhkjsd;lghkjsH</div><div id="t">l;kjd;lgkj;dlkfjh</div><div id="d">sdflgjsdl;fjglsdkjg</div>

Почему не использовать традиционное для таких случаев решение float: left?

и да, кстати, бага тут нет.

Всё закономерно.

margin: 0 -2px 0 -2px; можно записать короче:

margin: 0 -2px;

С ним блоки встали вплотную друг к другу. Как бы.

А теперь нажмите Cmd+«+» пару раз, разрушьте свою иллюзию.

вплотную они до тех пор, пока ширина пробела 4px.

Edited August 29, 2010 by swetlana

mishka · August 30, 2010

Когда между словами ставить пробелы - то и на сайте между словами будут пробелы. Причем сколько их не ставь (можно и табы) они браузер превратит их в один пробел.

Так вот (как сказала выше Света), display:inline-block - одновременно и блочный и строчный элемент. Поэтому и появляются пробелы.

Я знаю 2 решения:

1. Теги писать слитно (как продемонстрировала выше Света).

Минус - плохо читаемый код.

2. На родительский блок (font-size:0; line-height:0;), а на блоки которые нужно расположить в ряд задавать нужный размер шрифта (display:inline-block; font-size:12px; line-height:14px;)

Минус - не получится в таких блоках сделать относительным размер шрифта.

psywalker · August 30, 2010

А ещё есть простой способ удалить пробелы, поставив комментарии между блоками

<div id="o">
Kldj;glhkjsd;lghkjsH
</div><!--

--><div id="t">
l;kjd;lgkj;dlkfjh
</div><!--

--><div id="d">
sdflgjsdl;fjglsdkjg
</div>

v.asya · September 2, 2010

Ух ты!

Спасибо всем большое!

Теперь понятно откуда ноги растут!

Протестировав разные способы, был выбран вариант с комментариями. Очень понравился.

А вот вариант с нулями на родительском слое не сработал - он убирает и вложенные в него дивы. Начисто. Ну или я что-то не правильно делаю.

Еще раз всем спасибо.

Sign In

Зазор между div'ами при нулевом padding,margin,border

Question

v.asya

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

v.asya

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

v.asya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information