0

Есть блок-родитель, шириной 600пикселей, в нем 3 блока по 200 пикселей с display:inline-block;

Но вот почему-то, они не влезают, и между ними какие - то отступы. margin - 0, padding - 0..

Что это за отступы? При float: такого нет, все 3 блока встают один за другим.

<div id="test-bg">
    <div class="test-block">1</div>
    <div class="test-block">2</div>
    <div class="test-block">3</div>
</div>

#test-bg{
        width: 600px;
        height: 200px;
        border: 1px solid red;
        margin: 5px auto;
        box-sizing: border-box;
    }

    .test-block{
        width: 200px;
        height: 200px;
        display: inline-block;
        border:1px solid orange;
        box-sizing: border-box;
    }

https://jsfiddle.net/mq9tnjp9/

3
  • 1
    Нужно убрать переносы строк после блоков, суть в том что срабатывает табуляцыя, и это является пробелом, так как браузер вырезает все повторяющиеся пробелы, и также стоит указывать левый отступ в -4 пикселя всем елементам за первым. margin-left: -4px; 20 авг 2016 в 0:02
  • А зачем указывать отступ?..
    – user190134
    20 авг 2016 в 0:07
  • 1
    Потому что в самом начале своего существования линейный блок был предназначен именно так, а именно имитирует пробел, а -4 его и убирают, ясное дело только визуально! 20 авг 2016 в 0:18

1 ответ 1

1

Поскольку ваши блоки являются строчными, то каждый из блоков считается словом, а между словами в вашем случае блоками остаются пробелы. Вы можете блоку test-bg оборачивающему ваши test-block задать font-size: 0; и пробелы исчезнут, как по мне это самый простой и действенный способ...

#test-bg{
			width: 600px;
			height: 200px;
			border: 1px solid red;
			margin: 5px auto;
      font-size:0;
		}

		.test-block{
			width: 200px;
			height: 200px;
			display: inline-block;
			border:1px solid orange;
			box-sizing: border-box;
		}
<div id="test-bg">
		<div class="test-block">1</div>
		<div class="test-block">2</div>
		<div class="test-block">3</div>
	</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.