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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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