Как убрать расстояние между блоками?

Question

[Евгений Иванов]

По вертикали блоки идут "слитно". Но вот по горизонтали между ними непонятно откуда появляется расстояние.
Почему оно появилось и как его убрать?

https://jsfiddle.net/os2be8ty/4/

HTML

<div id="FULL_PAGE">
<div class="image_background">


<div class="panel_row_h_separator"></div>
<div class="panel_row_1">
<div class="graph_panel ui_panel_1">1</div>
<div class="graph_panel ui_panel_1">2</div>
<div class="graph_panel ui_panel_1">3</div>
</div>

<div class="panel_row_2">
<div class="graph_panel ui_panel_1"></div>
<div class="graph_panel ui_panel_1"></div>
<div class="graph_panel ui_panel_1"></div>
</div>

<div class="panel_row_3">
<div class="graph_panel ui_panel_1"></div>
<div class="graph_panel ui_panel_1"></div>
<div class="graph_panel ui_panel_1"></div>
</div>
<div class="panel_row_h_separator"></div>


</div>
</div>

CSS

html,body 
{
padding: 0px;
margin: 0px;
font-family: Arial;
}

.ui_panel_1 {
    padding: 10px;
    background: #222A37;
    border: 1px solid #383838;
    color: #CDCFD2;
    font-family: Arial;
    font-size: .875rem;
    vertical-align: middle;
    }
    
.image_background
{
position: fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:#e1e1e1;
}


.panel_row_h_separator
{
position: relative;
width:100%;
height: 5%;
background:perple;
}

.panel_row_1
{
position: relative;
width:100%;
height: 30%;
margin: 0 auto; 
text-align: center;
/* background:red; */
}

.panel_row_2
{
position: relative;
width:100%;
height: 30%;
margin: 0 auto; 
text-align: center;
/* background:blue; */
}

.panel_row_3
{
position: relative;
width:100%;
height: 30%;
margin: 0 auto; 
text-align: center;
/* background:yellow; */
}

.graph_panel
{
height:100%;
padding:0px !important;
margin:0px !important;
/* height: calc(100% - 20px); */
width: 20vw;
display:inline-block;

}

Answer 1

[ⓒⓢⓢ]

для ".image_background" добавить стиль
font-size: 0;

Comments

[Андрей Федоров]

не надо так делать никогда. в этом случае для внутренних элементов размер шрифта тоже обнулиться и вам придется его восстановить. для адаптивного сайта это не так просто как кажется на первый взгляд.

[ⓒⓢⓢ]

Андрей Федоров, по мне лучше обнулить размер и определить в дочернем компоненте одной строкой, чем расставлять комментарии в разметку по всем элементам.

[Евгений Иванов]

Наверно, так и сделаю.

.panel_row_1
{
position: relative;
width:100%;
height: 30%;
margin: 0 auto; 
text-align: center;
font-size: 0;
}

Тем более, что в панелях все элементы имеют свой собственный стиль.

А вот это

А появляются эти отступы потому, что с доктайпом в строгом режиме (html5 доктайп тоже) браузер все равно резервирует место для символов

Как бы странно. Но без доктайпа не валидный html.

[Андрей Федоров]

JRK_DV, проблема в том, что вы не знаете какого размера должен быть шрифт во внутреннем блоке. погулите статьи на эту тему, по уму там одной строчкой все не решается.

Answer 2

[Максим Тимофеев]

У Вас .graph_panel имеет жестко заданный width: 20vw;

Answer 3

[Андрей Федоров]

Уже спрашивали до вас, почитайте тут - Откуда появляется горизонтальный отступ у инлайн-блоков?