Другое пространство между вопросом divs, другие ответы не работают

Question

Получил пробел между одним div на веб-странице. Воссоздал его как jsfiddle http://jsfiddle.net/durN4/

Проблема заключается в том, что баннер «Швейцария Inn на Blue Ridge Parkway» и основной текст под ним. В верхней части и в нижней части тега div находится пробел. Вот CSS код, как найти на странице jsfiddle ...

#main_holder { 
width: 75%; 
min-width: 750px; 
margin-right: auto; 
margin-left: auto; 
border: 5px solid #E2BE6A; 
position: relative; 
-moz-box-shadow: 0px 0px 21px 5px rgba(2, 1, 14, 0.6); 
-webkit-box-shadow: 0px 0px 21px 5px rgba(2, 1, 14, 0.6); 
box-shadow: 0px 0px 21px 5px rgba(2, 1, 14, 0.6); 
height: auto; 
} 
#headline { 
height: 155px; 
border-bottom: 5px solid #E2BE6A; 
width: 100%; 
background: -ms-linear-gradient(top left, #FFFFFF 0%, #327EEF 100%); 
background: -moz-linear-gradient(top left, #FFFFFF 0%, #327EEF 100%); 
background: -o-linear-gradient(top left, #FFFFFF 0%, #327EEF 100%); 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #327EEF)); 
background: -webkit-linear-gradient(top left, #FFFFFF 0%, #327EEF 100%); 
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #327EEF 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",endColorstr="#327EEF",GradientType=1); 
} 
#rotator_holder { 
height: 321px; 
width: 100%; 
border-bottom-width: 5px; 
border-bottom-style: solid; 
border-bottom-color: #E2BE6A; 
position: relative; 
} 
#navbar { 
height:35px; 
width: 100%; 
border-bottom-width: 5px; 
border-bottom-style: solid; 
border-bottom-color: #E2BE6A; 
position: relative; 
background-color: #FFF1CE; 

} 
#titlebar { 
font-family: 'Habibi', serif; 
font-size: 24px; 
height: 30px; 
width: 100%; 
background: -ms-linear-gradient(top left, #327EEF 0%, #FFFFFF 100%); 
background: -moz-linear-gradient(top left, #327EEF 0%, #FFFFFF 100%); 
background: -o-linear-gradient(top left, #327EEF 0%, #FFFFFF 100%); 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #327EEF), color-stop(1, #FFFFFF)); 
background: -webkit-linear-gradient(top left, #327EEF 0%, #FFFFFF 100%); 
background-image: linear-gradient(to bottom right, #327EEF 0%, #FFFFFF 100%); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#327EEF",endColorstr="#FFFFFF",GradientType=0); 
color: #000; 
padding-top: 10px; 
padding-bottom: 10px; 
} 
#main_content { 
font-size: 18px; 
background-color: #FFF1CE; 
width: 100%; 
-moz-box-shadow: inset 0px 0px 13px 6px #c4c6cf; 
-webkit-box-shadow: inset 0px 0px 13px 6px #c4c6cf; 
box-shadow: inset 0px 0px 13px 6px #c4c6cf; 
} 
#padding { 
width: 94%; 
margin-right: auto; 
margin-left: auto; 
font-family: "Open Sans", sans-serif; 
} 

Answer 1

Вашего вопрос, вызван задворки на h1 и последний p внутри main_content.

jsFiddle

#main_content p:last-child { 
    margin-bottom: 0; 
} 

#main_content h1 { 
    margin-top: 0; 
} 

Answer 2

То, что вы видите, называется collapsing margins. Это край элемента h1 в основном тексте, который толкает его контейнер вниз.

Когда элемент не имеет отступов или границ, а дочерний элемент имеет маржу, это поле не применяется между дочерним элементом и родительскими границами, но вне родительского элемента.

Итак, есть несколько способов, которые вы могли бы это исправить, в зависимости от того, что результат вы хотите:

• Снимите верхнее поле h1 элемента
• Добавить отступ в верхней части контейнера
• добавить рамку к верхней части контейнера