如何刪除div之間的空間？
[英]How to remove space between divs?
問題描述
我需要刪除之間的空白。
我已經嘗試以0的幅度，但沒有成功。
知道如何解決嗎？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<title></title>
<style>
body {
margin: 0;
padding: 0;
background: transparent;
width: 1280px;
height: 720px;
}
#content {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
outline: 1px solid red;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#bar-header, #bar-footer {
position: fixed;
left: 0px;
width: 1280px;
height: 30px;
background-color: darkgray;
}
#bar-header {
top: 0px;
}
#bar-footer {
top: 690px;
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
height: 300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function start() {
};
</script>
</head>
<body onclick="start();">
<div id="page">
<div id="bar-header">Header</div>
<div id="content">
<div class="content-section">
<h2>Content 1</h2>
<a name="section-1"></a>
</div>
<div class="content-section">
<h2>Content 2</h2>
<a name="section-2"></a>
</div>
<div class="content-section">
<h2>Content 2</h2>
<a name="section-2"></a>
</div>
<div class="content-section">
<h2>Content 4</h2>
<a name="section-2"></a>
</div>
</div>
<div id="bar-footer">Footer</div>
</div>
</body>
</html>
編輯：
我也嘗試過
.content-section {background-color：lightgray; 輪廓：1px純黑色； 高度：300像素； 底邊距：-20px; }
它有效，但是我寧願選擇其他解決方案。
4 個解決方案
解決方案1
3 2014-07-24 11:48:00
在content-section div內的h2標簽中添加樣式
.content-section h2 {
margin-top: 0px;
}
.content-section:first-of-type h2 {
margin-top: 27px;
}
解決方案2
1 已采納 2014-07-24 11:50:32
嘗試重置CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
解決方案3
1 2014-08-03 16:14:18
您可能要刪除h2的邊距。 最簡單的方法是通過使其內聯來刪除元素的block性質。
h2 { display:inline-block; }
您可能不需要的另一件事是元素的fixed位置。 通過將內容保持在靜態高度，可以使用塊元素的堆疊來控制位置。 您需要做的就是管理overflow以隱藏超出其邊界范圍的內容。 這可能不是您想要的，但是請查看以下更改。
解決方案4
0 2014-07-24 11:51:53
使用Vertical-align：top; 用於CSS中的content-section類
.content-section {
background-color: lightgray;
outline: 1px solid black;
height: 300px;
vertical-align:top;
}
如何消除這兩個DIV之間不需要的空間？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.