Почему 50% не встают в одну линию

@Tatyana_Pro · Регистрация: 24.08.2017

Author24 — интернет-сервис помощи студентам

Почему при display:inline-block... 2 блока не встают в одну линию, если им задать ширину 50%.
Паддингов, маржинов, борлеров нет.???

HTML5

      <body>
        <div class="centr" background="red">
            <div class="block red"></div>
            <div class="block blue"></div>
            <div class="block olive"></div>
            <div class="block grey"></div>
            </div>
        
      </body>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
.centr {
    width: 900px;
    margin: 0 auto;
}
.block {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 50px;   
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.grey {
    background: grey
}
.olive {
    background: olive;
}

@mrtoxas · 27.08.2017, 23:58

Потому что, у строчных элементов есть дефолтные отступы. Задайте родителю нулевой размер шрифта и блоки встанут в одну линию.

@Tatyana_Pro · 28.08.2017, 00:19 **[ТС]**

Опять я создала тему с паники............. и уже узнала ответ. Извините и спасибо.!

Добавлено через 3 минуты
Спасибо огромное!!!

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.08.2017, 23:58	2
	Потому что, у строчных элементов есть дефолтные отступы. Задайте родителю нулевой размер шрифта и блоки встанут в одну линию. 0

@Tatyana_Pro 0 / 0 / 1 Регистрация: 24.08.2017 Сообщений: 43
	28.08.2017, 00:19 [ТС]	3
	Опять я создала тему с паники............. и уже узнала ответ. Извините и спасибо.! Добавлено через 3 минуты Спасибо огромное!!! 0