2015-11-16 3 views
0

Мне нужно отобразить три окна последовательно, используя следующий код. Я получаю всегда «пробел» нескольких пикселей между ними.Как устранить пустое пространство между элементом, расположенным с дисплеем: встроенный блок?

Я хотел бы знать:

  • Как иметь коробку, один за другим, не место? Я знаю, что могу добавить минус-пиксель, но я ищу более консолидированное решение.
  • Почему это происходит? Могу ли я повторно настроить, чтобы решить эту проблему?
  • Знаете ли вы другую лучшую альтернативу?

div { 
 
    box-sizing: border-box 
 
} 
 
.box { 
 
    width:50px; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
#a, #b, #c { 
 
    display:inline-block; 
 
}
<div id="container"> 
 
    <div id="a" class="box"></div> 
 
    <div id="b" class="box"></div> 
 
    <div id="c" class="box"></div> 
 
</div>

+2

Было три или четыре метода с установкой 'font-size: 0' на родительском, с использованием блоков комментариев между встроенными блочными элементами, с использованием отрицательных полей и т. Д. Я уверен, что существует существующий вопрос. – Harry

+0

Связанные: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ – GibboK

+0

Связанные: https: // css-трюки. com/fighting-the-space-between-inline-block-elements/ – GibboK

ответ

0

Да font-size: 0px к родителю и vertical-align: top.

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