H1, вызывающий зазор между divs

Question

Существует пробел между .heads и .container1, что как-то связано с тегом h1. Пробовал без h1, и он работает, однако мне нужен h1.

Как бы поменять промежуток между .heads и .container1?

http://codepen.io/techagesite/pen/Nqxzvg

.heads { 
    background-color: #FF9000; 
    padding: 0px 0px 0px 0px; 
    border: 1px solid #FFC223; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    border-bottom: none; 
    border-bottom-right-radius: none; 
    border-bottom-left-radius: none; 
} 
h1 { 
    padding: 0; 
    font-size: 20px; 
    font-family: Tekton Pro; 
    color: #71A00E; 
} 
.container1 { 
    width: 100%; 
    border: 1px solid #006699; 
    background: #0A3D5D; 
    float: left; 
    padding-bottom: 4px; 
    padding-top: 4px; 
    padding-right: 0px; 
    padding-left: 4px; 
    clear: both; 
    border-bottom-right-radius: 8px; 
    border-bottom-left-radius: 8px; 
    border-top-right-radius: none; 
    border-top-left-radius: none; 
} 
p.normal { 
    font-size: 21px; 
    font-family: tahoma; 
    color: #F7DF57; 
} 

<div class="heads"> 
    <h1>Some heading in here</h1> 
</div> 
<div class="container1"> 
    <p class="normal">Some text in here</p> 
</div> 

Answer 1

Попробуйте добавить margin:0; на h1

h1 { 
      padding: 0; 
      font-size:20px; 
     font-family:Tekton Pro; 
     color:#71A00E; 
      margin:0; 
     } 

Answer 2

Вы можете удалить margin из h1 элемента:

h1 { 
    margin: 0; 
} 

Настоятельно рекомендуем прочитать о h1 элемент here и Collapsing margins тоже.

codepen

Answer 3

использование

*{ 
    padding:0; 
    margin:0; 
} 

будет удалить все дополнительные отступы и поля всех блоков элемента.

Answer 4

разрыв вызван margin collaspsing. Таким образом, нижний край h1 рухнул с нижней части элемента головки. Обратите внимание: верхний край не сбрасывается, потому что есть граница между положением элемента заголовка и маркой h1.

Вы можете использовать различные методы, чтобы содержал. Самый простой способ - использовать overflow: hidden (в этом примере вы можете добавить нижнюю границу, цвет которой соответствует цвету фона).

.heads { 
 
    background-color: #FF9000; 
 
    border: 1px solid #FFC223; 
 
    border-bottom: none; 
 
    /* irrelevant rules removed */ 
 
    overflow: hidden; 
 
} 
 
h1 { 
 
    font-size: 20px; 
 
    color: #71A00E; 
 
} 
 
.container1 { 
 
    width: 100%; 
 
    border: 1px solid #006699; 
 
    background: #0A3D5D; 
 
    float: left; 
 
    clear: both; 
 
    /* irrelevant rules removed */ 
 
} 
 
p.normal { 
 
    font-size: 21px; 
 
    color: #F7DF57; 
 
}

<div class="heads"> 
 
    <h1>Some heading in here</h1> 
 
</div> 
 
<div class="container1"> 
 
    <p class="normal">Some text in here</p> 
 
</div>

Answer 5

Я просто добавить дисплей свойство инлайн-блока на h1 или элемента р и он удаляет все пробелы Див.