divs問題之間的另一個空間，其他答案不工作

在網頁中只有一個div之間有空格。將其重新創建爲jsfiddle http://jsfiddle.net/durN4/divs問題之間的另一個空間，其他答案不工作

問題出在「瑞士酒店藍嶺大道」橫幅和它下面的主要文本之間。 div標籤的頂部和底部有一個空格。這是因爲的jsfiddle頁上的CSS代碼...

#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; 
}

來源

2013-03-09 user2151928

我建議使用'浸軋left'，而不是'' 縮進文本。 – 2013-03-09 16:54:26

您的問題正在引起利潤率的h1最後p內main_content。

jsFiddle

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

#main_content h1 { 
    margin-top: 0; 
}

來源

2013-03-09 16:58:49

太棒了！謝謝謝謝！ – user2151928 2013-03-09 17:06:34

你看到什麼叫collapsing margins。它是主文本中h1元素的邊界，它將容器向下推。

當元素沒有填充或邊框，並且子元素具有邊距時，該邊距不適用於子元素和父邊界之間，但不在父元素之外。

因此，有幾種方法，你可以修復它，這取決於什麼導致你想要的：

取出h1元素
的頂邊填充添加到容器
邊框添加到容器的頂部

來源

2013-03-09 17:06:05 Guffa

divs問題之間的另一個空間，其他答案不工作

回答

相關問題