Размеры блоков

[drevil37]

Пожалуйста помогите. Простой код http://cssdeck.com/labs/iwugvudp Сверху два блока 800 и 200 левый отступ у второго 10px, поля 0 итого 1010 px, блок ниже 1010px, но визуально границы блоков по левому краю не совпадают.

В чем может быть проблема?

[ryter]

vertical-align: top;

[mrnobody]

Проблема в пробельных символах.

Ведь если вы напишите например вот так, 

<span>один</span> <span>два</span> <!-- пробел между спанами -->

они не отобразатся в браузере слитно "одиндва", а отобразятся так — "один два". Тоже самое происходит, когда вы задаете элементам свойство display: inline-block;

 

 

Если сделать разметку такой

<div class="lefttopone">  </div><div class="righttopone">  </div><div class="lefttoptwo">  </div><div class="menuone">  </div><div class="menutwo">  </div><div class="menuthree">  </div>

или такой:

<div class="lefttopone"> </div><div class="righttopone"> </div><div class="lefttoptwo"> </div><div class="menuone"> </div><div class="menutwo"> </div><div class="menuthree"> </div>

или даже такой:

<div class="lefttopone"></div><!--  --><div class="righttopone"></div><!--  --><div class="lefttoptwo"></div><!--  --><div class="menuone"></div><!--  --><div class="menutwo"></div><!--  --><div class="menuthree"></div>

то все будет как вы хотели.

Edited February 13, 2014 by mrnobody

[gritsyuk]

«Загадочные отступы» между инлайн-элементами

http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

Edited February 13, 2014 by gritsyuk