轉(zhuǎn)成內(nèi)聯(lián)塊級元素實現(xiàn)并排為什么兩個元素之間有距離,都設(shè)置margin為0了啊,用浮動float:left實現(xiàn)這兩個div之間就沒有
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動模型</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
border:2px red solid;
? ? width:200px;
? ? height:400px;
display:inline-block;
/*float:left;*/
}
</style>
</head>
<body>
<div id="div1">欄目1</div>
<div id="div2">欄目2</div>
</body>
</html>
2017-02-08
因為div有默認的邊距,你可以在css 的頭部設(shè)置,
這樣就可以消除所有你所用類的默認內(nèi)外邊距了,如果需要的話再在個別的元素里設(shè)置。
div是塊級元素,默認情況下是單獨占用一行的。
你想讓兩個div水平放置,就得改變div的display屬性。
分別把兩個div的css中加入
然后給需要左對齊的div設(shè)置float:left;
同理,右對齊的設(shè)置float:right;
如下:
希望能解決你的困擾,O(∩_∩)O謝謝!
2017-02-08
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
div{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
border:2px red solid; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? width:200px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? height:400px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? float:left; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
2017-02-08
設(shè)置body中的所有元素字體大小為0px; body{font-size:0px;}
.設(shè)置子元素的字體大小就可以去除間距
2017-02-08
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動模型</title>
<style type="text/css">
div{
border:2px red solid;
? ? width:200px;
? ? height:400px;
display:inline-block;
/*float:left;*/
}
</style>
</head>
<body>
<div>欄目1</div><div>欄目2</div>
</body>
</html>
把兩個div寫在一行,這樣就沒了
2017-02-08
你的問題跳出來以后我也迷惑了好一會兒。。然后我發(fā)現(xiàn)你這個div之間是換行的。。如果換行的話就相當于插入了一個空格,所以margin=0也貼不到一起。把兩個div塊放在代碼的同一行內(nèi)就沒事了