padding和margin的区别

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~

最近在做界面，出现了如下问题：

可以看出，图中圈出来的就是问题所在，左右两边和下面是不对齐的，而bootstrap代码中，全部都是12个栅格：

<div class = "col-md-12 col-sm-12 col-lg-12">
<span style="white-space:pre">	</span><img alt="" src="/EVM/img/sac_jietu14.jpg" style = " width:100%">
</div>

所以，经同学提醒，知道了问题所在，就是元素的内边距padding属性的设置出了问题。

 

下面给出padding的相关介绍。

padding是CSS中的一个属性，用来设置元素的内边距，这里的内边距包括四个方面的边距：上下边距、左右边距。

1、四个参数

eg:   padding:10px 5px 10px 12px;

 

• 上内边距是10px;
• 右内边距是5px;
• 下内边距是10px;
• 左内边距是12px.

 

四个参数情况下的顺序是顺时针方向，即上、右、下、左。

2、三个参数

eg:  padding: 10px 12px 20px;

 

• 上内边距是10px；
• 左右内边距是12px；
• 下内边距是20px；

 

3、两个参数

eg:  padding: 12px 23px;

 

• 上下内边距是12px；
• 左右内边距是23px；

 

4、一个参数

eg:  padding: 10px;

 

• 所有的4个内边距都是10px；

 

5、padding基础：

 

• 默认值：0px；
• 继承性：no；
• 版本：CSS1；
• js语法：object.style.padding = "10px 20px";   （上下10px，左右20px）

 

所以，在上述代码的div中加入style = "padding:0px"就可以解决问题。

<div class = "col-md-12 col-sm-12 col-lg-12" style="padding:0px">
	<img alt="" src="/EVM/img/sac_jietu14.jpg" style = " width:100%">
</div>

 

 

 

上面用红线标注出来的就是没有加入 style = "padding:0px";时的div内边距情况。可看出左右两边都是有空隙的，但是上下是没有空隙的，所以加入style="padding: 0px";就可以保证4个内边距都是0px。

而对于margin，是指的元素的内边距，其用法和padding相似。

 

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~