html中三个盒子并排间距

div盒子并排显示在各大网页中是很寻常的页面效果，但是实现这种效果的方法确不止一种

方法一：使用float

.father{

width: 660px

height: 150px

margin: 0 auto

border: 2px solid red

overflow: hidden

}

.son{

width: 150px

height: 150px

float: left

text-align: center

line-height: 150px

margin-right: 20px

}

.last{

margin-right: 0

}

<div class="father">

<div class="son" style="background-color: pink">son1</div>

<div class="son" style="background-color: rebeccapurple">son2</div>

<div class="son" style="background-color: sandybrown">son3</div>

<div class="son last" style="background-color: slategrey">son4</div>

</div>

登录后复制

原本的浮动之后再设置外边距，外层盒子的宽度会不够导致最后一个盒子在第二排显示

为什么不显示？

原因：父元素：660px <150px4 + 20px4 = 680px

因此还需要再重新定义最后一个盒子的右外边距为0

方法二：使用 display：inline-block

.father{

width: 660px

height: 150px

margin: 0 auto

border: 2px solid red

font-size: 0

}

.son{

width: 150px

height: 150px

display: inline-block

*display: inline

*zoom: 1

text-align: center

line-height: 150px

margin-right: 20px

font-size: 14px

}

.last{

margin-right: 0

}

<div class="father">

<div class="son" style="background-color: pink">son1</div>

<div class="son" style="background-color: rebeccapurple">son2</div>

<div class="son" style="background-color: sandybrown">son3</div>

<div class="son last" style="background-color: slategrey">son4</div>

</div>

登录后复制

但是使用 display：inline-block会出现一些情况，比如

先在body中创建div（2）在 head中写入style（3）在style中写入盒子的边框宽度、线条形式、颜色（4）打开网页查看效果（5）盒子创建完成上面创建的盒子 只有一个盒子 没有宽度 没有高度下面来编辑盒子2、编辑盒子（1）添加盒子宽度打开页面查看效果刚才没编辑宽度的时候 宽度是页面的100% 现在编辑后 明显看到已经有了宽度（2）添加盒子高度打开页面查看效果这样既可以看到盒子既有宽度 又有高度3.调整盒子外部线条样式盒子线条有三个元素 按顺序分别是 宽度、样式、颜色（1）更改宽度在border后三个元素第一个元素更改由上部代码及效果 可以看出像素值越大 边框线条越宽（2）编辑线条样式solid为实线double为双实线dotted为点虚线dashed为线段虚线（3）更改线条颜色通过更改border第三个元素 更换颜色4、多个盒子进行编辑在body中创建多个div 然后进行命名（1）命名创建三个不同的盒子 为三个不同的盒子分别取名字（分别取名字，是为了分开编辑，若三个盒子一样相同效果，可不用取名字，直接创建盒子即可）（2）分别编辑在head中分别编辑

---