Откуда берется расстояние между блоками?

[FRUTALITY]

Доброго времени суток.

Простейший блок на странице ввел меня в замешательство.

<style type='text/css'>
			section{
				display:block;
			}
			#container{
				margin:0 auto;
				width:900px;
			}

			#divsection div{
				display:inline-block;
				/*float:left;*/
				width:150px;
				border:1px solid black;
				margin:0;
			}

		</style>
		<section id='container'>
			<section id='divsection'>
				<div id='active-tab'><a href=''>Пункт 1</a></div>
				<div><a href=''>Пункт 2</a></div>
				<div><a href=''>Пункт 3</a></div>
				<div><a href=''>Пункт 4</a></div>
			</section>
			<section id='undermenu'>
				Атата
			</section>
		</section>

Появляется "пустое" место между div'ами с "Пунктами 1-4". Я знаю, как это можно обойти (display:block + float:left), но хочется знать, почему возникает расстояние между блоками?

[Gaspode]

display:inline-block;

В этом причина.

Можете либо сделать их float'ом вместо этого, либо вот так:

<div id='active-tab'><a href=''>Пункт 1</a></div><div>
<a href=''>Пункт 2</a></div><div>
<a href=''>Пункт 3</a></div><div>
<a href=''>Пункт 4</a></div>

но хочется знать, почему возникает расстояние между блоками?

Да просто так мир устроен, по ходу =/

Edited May 6, 2011 by Gaspode

[psywalker]

(display:block + float:left),

- бред.

Проблема в другом: ИЕ не понимает display:inline-block;

[FRUTALITY]

Gaspode, это, конечно, ответ, достойный Капитана Очевидность. Я прекрасно понимаю, что расстояние только при использовании inline-block. При использовании обычного block, этого расстояния нет, но для выстраивания div'ов в ряд приходится юзать float.

Неужели inline-block по стандарту подразумевает некое расстояние между блоками? Звучит как то глупо.

psywalker, простите, что именно бред? Использование этой связки прекрасно решает проблему. div'ы становятся рядом (в строку), расстояние между ними пропадает. Но мне не нравится этот способ из-за использования float, да и вопрос у меня скорее познавательный, почему происходит так, а не иначе.

А ИЕ тут вообще не причем - я проверяю сейчас в Firefox 4.0.1.

upd. Попробовал сделать так, как посоветовал Gaspode - помогло. Но почему? >.<

Изменилось только то, что новый div начинается в исходном коде на той же строке. Какая разница браузеру, с какой строки начинается код?Он же должен сами теги и стили интерпретировать. Или я чего-то не понимаю.

Edited May 6, 2011 by FRUTALITY

[psywalker]

psywalker, простите, что именно бред?

Бред именно в этой связке. display:block никак не влияет на float:left, эти вещи просто несовместимы вместе. При float:left блоки автоматом становятся блочными, и без display:block

Я описал выше настоящую проблему.

[Gaspode]

Неужели inline-block по стандарту подразумевает некое расстояние между блоками? Звучит как то глупо.

И inline тоже. Смиритесь.

почему происходит так, а не иначе.

Перевод строки между блоками в коде - тоже символ. Он при таком отображении считается простым пробелом и почему-то не игнорируется. Фиг его знает, почему.

простите, что именно бред?

Уберите display: block, оставьте только float и найдите десять отличий.

[Great Rash]

inline-block ведет себя как слово в тексте. Отсюда и пробелы. Как пробелы между словами. Перенос строки считается как пробел, поэтому чтобы пробелов не было надо написать элементы без них:

<section id='divsection'>
  <div id='active-tab'><a href=''>Пункт 1</a></div><div><a href=''>Пункт 2</a></div><div><a href=''>Пункт 3</a></div><div><a href=''>Пункт 4</a></div>
</section>

UPD: А можно еще обнулить пробелы таким способом:

#divsection {
  font-size: 0;
  line-height: 0;
  letter-spacing: -1px;
}

#divsection div {
  display: inline-block;
  width: 150px;
  border: 1px solid black;
  margin: 0;

  font-size: 12px;
  line-height: normal;
  letter-spacing: normal;
}

[FRUTALITY]

Ну, допустим, про то, что float:left автоматически подразумевает блочность элемента, не знал. Спасибо, что просвятили.

Но проблема не в этом, что вы так к этому прицепились. Спасибо Gaspode и Great Rash, что объяснили, почему inline-block ведет себя так, а не иначе. Это многое объясняет

upd: psywalker, то, что ИЕ не понимает inline-block, имхо, не является проблемой. Мой 8 ИЕ понимал, 9, соответственно, тоже понимает. А старье меня в данном контексте не интересует, но это уже оффтоп.

Edited May 6, 2011 by FRUTALITY

[psywalker]

Ну, допустим, про то, что float:left автоматически подразумевает блочность элемента, не знал. Спасибо, что просвятили.

Но проблема не в этом, что вы так к этому прицепились. Спасибо Gaspode и Great Rash, что объяснили, почему inline-block ведет себя так, а не иначе. Это многое объясняет

upd: psywalker, то, что ИЕ не понимает inline-block, имхо, не является проблемой. Мой 8 ИЕ понимал, 9, соответственно, тоже понимает. А старье меня в данном контексте не интересует, но это уже оффтоп.

Ясно, ну отлично тогда, главное разобрались. Я просто было подумал, что речь идёт о неработающих инлайн-блоках в старых ослах

[FRUTALITY]

Great Rash, спасибо за идейку с letter-spacing. Осталось потестить на разных браузерах

Gaspode, psywalker, вам тоже спасибо большое. Тему можно считать закрытой

[psywalker]

Тему можно считать закрытой

Да нет, пусть повисит, мало ли, кто нибудь ещё решение подбросит. У нас народ такой...

[SelenIT]

Он при таком отображении считается простым пробелом и почему-то не игнорируется. Фиг его знает, почему.

И не только фиг, но и спека CSS2.1...

[psywalker]

Он при таком отображении считается простым пробелом и почему-то не игнорируется. Фиг его знает, почему.

И не только фиг, но и спека CSS2.1...

Дружище, а ты можешь своими словами описать, что нам написано плиз

[Softlink]

по теме:

<style type='text/css'>
                        section{
                                display:block;
                        }
                        #container{
                                margin:0 auto;
                                width:900px;
                        }

                        #divsection div{
                                display:inline-block;
                                /*float:left;*/
                                width:150px;
                                border:1px solid black;
                                margin:0;
				overflow:hidden;
                        }

			.stroka{float:left;}

                </style>
                <section id='container'>
                        <section id='divsection'>
                                <div id='active-tab'><a href=''>Пункт 1</a></div>
                                <div class="stroka"><a href=''>Пункт 2</a></div>
                                <div class="stroka"><a href=''>Пункт 3</a></div>
                                <div class="stroka"><a href=''>Пункт 4</a></div>
                        </section>
                        <section id='undermenu'>
                                Атата
                        </section>
                </section>

понятно, что в коде символов добавится, но наверняка же эти ячейки будут еще оформляться. Может и пригодится класс. Пробелов тоже нет.