转成内联块级元素实现并排为什么两个元素之间有距离，都设置margin为0了啊，用浮动float：left实现这两个div之间就没有-慕课网

首页课程实战体系课手记专栏慕课教程

转成内联块级元素实现并排为什么两个元素之间有距离，都设置margin为0了啊，用浮动float：left实现这两个div之间就没有

来源：13-4 起飞咯 - 浮动模型

慕UI9918925

2017-02-08 15:17

<!DOCTYPE HTML>

<html>

<head>

margin:0px;

padding:0px;

}

div{

border:2px red solid;

width:200px;

height:400px;

display:inline-block;

/*float:left;*/

}

</style>

</head>

<body>

</body>

</html>

写回答关注

5回答

墨以丶不思量

2017-02-08 15:57:35
因为div有默认的边距，你可以在css 的头部设置，
```
*{
margin：0；
padding:0;
}
```
这样就可以消除所有你所用类的默认内外边距了，如果需要的话再在个别的元素里设置。
div是块级元素，默认情况下是单独占用一行的。
你想让两个div水平放置，就得改变div的display属性。
分别把两个div的css中加入
```
display:inline-block;
```
然后给需要左对齐的div设置float:left;
同理，右对齐的设置float:right;
如下：
```
#div1{float：left}
```
希望能解决你的困扰，O(∩_∩)O谢谢！
1 1

dotss

这位仁兄的答案是对的。

2017-02-09 14:42:46

共 1 条回复 >
bbs227

2017-02-08 15:48:52

div{
border:2px red solid;
width:200px;
height:400px;
float:left;
｝

0 0
weibo_尉迟小宝866_04381561

2017-02-08 15:40:26

设置body中的所有元素字体大小为0px； body{font-size:0px;}
.设置子元素的字体大小就可以去除间距

0 0
慕粉171313602

2017-02-08 15:37:52

<!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写在一行，这样就没了

0 0
慕粉10560462

2017-02-08 15:33:50

你的问题跳出来以后我也迷惑了好一会儿。。然后我发现你这个div之间是换行的。。如果换行的话就相当于插入了一个空格，所以margin=0也贴不到一起。把两个div块放在代码的同一行内就没事了

0 0