Удалить "пробел" между элементом div

Это мой HTML-код

<div id="div1">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

Мой CSS:

#div1 {
    width:150px;height:100px;white-space:nowrap;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

Если я вставляю <!DOCTYPE html> перед тегом <html>, страница будет выглядеть так:

Но если я удалю тег <!DOCTYPE html>, пробелы между двумя строками будут удалены

Но я бы хотел использовать тег <!DOCTYPE html>, он рекомендует, но я не могу найти какое-либо правило CSS, которое может удалить это пробел, я использовал margin: 0; outline: none; и т.д., но это не работает, мне помогают. Спасибо! (Я плохо разбираюсь в английском...)

Ответ 1

Самый чистый способ исправить это - применить свойство vertical-align: top к вашим правилам CSS:

#div1 div {
   width:30px;height:30px;
   border:blue 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
}

Если вы хотите добавить контент в свой div, то использование line-height: 0 или font-size: 0 приведет к проблемам с вашим макетом текста.

Смотрите скрипту: http://jsfiddle.net/audetwebdesign/eJqaZ/

Где эта проблема приходит из

Эта проблема может возникнуть, когда браузер находится в режиме "quirks". В этом примере изменение doctype от:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

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

В режиме quirks пробелы игнорируются, но сохраняются в строгом режиме.

Литература:

html doctype добавляет пробелы?

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Ответ 2

Добавьте line-height: 0px; в родительский div

jsfiddle: http://jsfiddle.net/majZt/

Ответ 3

использовать line-height: 0px;

РАБОЧИЙ ДЕМО

Код CSS:

div{line-height:0;}

Это будет влиять в целом на все ваши Div. Если вы хотите, чтобы ваш существующий родительский div не имел интервала, вы можете применить его к нему.

Ответ 4

Вам нужно это

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<-- I absolutely don't know why, but go ahead, and add this code snippet to your CSS -->

*{
    margin:0;
    padding:0;
}

Чтобы он получал удовольствие, удаляя все эти проблемы с пробелами.

Ответ 5

Хотя, вероятно, это не лучший метод, который вы могли бы добавить:

#div1 {
    ...
    font-size:0;
}

Ответ 6

Вы можете использовать высоту строки в div1, как показано ниже:

<div id="div1" style="line-height:0px;">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

Смотрите это: http://jsfiddle.net/wCpU8/

Ответ 7

HTML

<div id="div1">
        <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

CSS

#div1 {
    width:150px;height:100px;white-space:nowrap;
    line-height: 0px;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

DEMO

Ответ 8

С помощью <br/> для создания новой строки это плохое решение с самого начала. Сделайте свой контейнер # div1 равным 3 дочерним div. <br/>, на мой взгляд, не следует использовать в других местах, кроме параграфов.