Как убрать отступ ?

Question

[Andreii787]

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

<div class="red"></div>
    <div class="top">
        <div class="blue"></div>
        <div class="gray"></div>
    </div>

.red{
    width: 600px;
    height: 40px;
    background-color: #880016;
    border:2px solid #DEDE45;
    margin: 0 auto; 
}

.blue{
    width:25%;
    height:100px;
    position:relative;
    top:70px;
    background-color: #00A3E8;
}
.gray{
    width: 120px;
    height: 200px;
    position:relative;
    top:20px;
    border:2px solid #C9C7B8;
    background-color: #EFE3AF;
}
body{
    background-color: green;
} 
.top {
    text-align:center;
}
.top > div {
    display:inline-block;
    vertical-align: top;
}

Answer 1

[maddog670]

jsfiddle.net/BE8qT/1

Answer 2

[Юрий Лобанов]

Скорее всего от пробельного символа между элементами inline-block.
Если у Вас два дива имеют display:inline-block, то попробуйте в коде расположить их так:
<div>...</div><div>...</div>
или так

<div>...</div><!--
--><div>...</div>

Comments

[Юрий Лобанов]

@maddog670 избавился от пробела путем отрицательного margin-left, такой подход не очень гибкий, но имеет место быть. Вот статья Вам ruseller.com/lessons.php?rub=29&id=1429

[Юрий Лобанов]

@Andreii787 jsfiddle.net/BE8qT/2 вот, воспользовался примером @maddog670 для демонстрации. Я убрал margin-left и убрал между блоками пробел, отступ также пропал.

[maddog670]

@iiil да там можно как у вас в первом варианте указано, вряд поставить и всё