Не могу понять почему блоки идут не в строку? Использовал display: inline-block

@triatri3 · Регистрация: 16.11.2016

Ума не приложу почему блоки идут по вертикали? по замыслу они должны идти 2 в строку + 2 в строку ниже, то есть матрцей 2 на 2. Что не так?

HTML5

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link href="1.css" rel="stylesheet">
</head>
<body>
 
    <div id="Header">
      <div id="Ball">
        <div class="Block Red"></div>
        <div class="Block Blue"></div> </br>
        <div class="Block Yellow"></div>
        <div class="Block Green"></div>
      </div>
    </div>
 
</body>
</html>

CSS

body {
  margin: 0px;
}
#Ball {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
}
#Header {
    width: 100%;
    height: 100px;
    background: black;
  padding: 5px;
}
.Block {
    width: 45px;
    height: 45px;
    border-radius: 15px;
}
.Red {
  background: red;
  display: inline-block;
}
.Blue {
  background: blue;
  display: inline-block;
}
.Yellow {
  background: yellow;
  display: inline-block;
}
.Green {
    background: green;
  display: inline-block;
}

@triatri3 · 10.09.2018, 21:02 **[ТС]**

Иллюстрация

@Academik · 10.09.2018, 21:23

triatri3, Это из-за того, что у контейнера со свойством display: inline-block; слева присутствует отступ.
Попробуйте добавить:

CSS

1 2	#Ball{font-size: 0;} .Block{font-size: 16px;}

@arnoldovich · 12.09.2018, 17:56

У Вас неправильно написан тег br. Должно быть так

HTML5

<br>

или так

HTML5

<br />

. Да он собственно и не нужен.

У Вас не получалось потому что инлайн блоки тупо не влазили в шарик и выстраивались один под другим.

Уже написали, что для #ball, нужно было поставить font-size: 0;

Короче так:

HTML5

<div id="header">
  <div id="ball">
      <div class="block red"></div>
      <div class="block blue"></div>
      <div class="block yellow"></div>
      <div class="block green"></div>
  </div>
</div>

CSS

#ball {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  padding: 0;
  font-size: 0; /* вот оно*/
}
#header {
  width: 100%;
  height: 100px;
  background: black;
  padding: 5px;
}
.block {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  display: inline-block;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.yellow {
  background: yellow;
}
.green {
  background: green;
}

@triatri3 6 / 6 / 8 Регистрация: 16.11.2016 Сообщений: 706
	10.09.2018, 21:02 [ТС]	2
	Иллюстрация 0 Миниатюры

	12.09.2018, 17:56

Опции темы

Не могу понять почему блоки идут не в строку? Использовал display: inline-block

Решение