整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。
在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。
这是用padding的学问
（1）需要在border内侧添加空白，在文字与边框留有距离时；
（2）空白处需要背景色时；
（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。
这是用margin的学问
（1）需要在border外侧添加空白时;
（2）空白处不需要有背景色时;
(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。
在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。
在CSS表文件ys2.css中的代码
/*单独指定一个边距*/
.one-margin {
margin-left: 100px;
}
/*4个边距*/
.four-margin {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
}
/*加上padding*/
.use-padding {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
padding-top: 20px;
}在HTML文件中的代码
<div class="big-div">
<h1 class="one-margin">margin用法</h1>
<div class="four-margin">
margin一个值：4个边距;<br/>
margin两个值：上下边距、左右边距;<br/>
margin三个值：上边距、左右边距、下边距;<br/>
margin四个值：上边距、右边距、下边距、左边距。
</div>
<div class="use-padding">
padding一个值：4个边距;<br/>
padding两个值：上下边距、左右边距;<br/>
padding三个值：上边距、左右边距、下边距;<br/>
padding四个值：上边距、右边距、下边距、左边距。<br/>
为了区分margin和margin，我只用 padding-top,你能看出效果么?
</div>
</div>输出结果
好了，有关CSS边距的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
ss中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。
负边距他符合正常的文档流特性，w3c也支持使用负边距，因此他有很好的兼容性不是在使用hack。
在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：
让链接不可点击
文本变得很难选中
失去焦点的时候按tab键失效
只要对节点添加position:relative属性就可以解决上述问题。
常用的已知宽高让内容垂直水平居中就是使用绝对定位之后让内容定位到中心点，然后使用负边距margin将content的中心拉回到父亲节点的中心重合，这样就达到了垂直居中的目的。如下图所示：
负边距实现垂直水平居中
在项目的开发过程中，经常会有使用浮动列表展示信息的时候，但在设计的时候为了美观每个item之间都会设置一定的间距来达到信息隔离的目的，并且在设计的时候一般都是使用分散两段对齐完成布局，但是在代码实现过程总能都会让每个item有一个右边距（margin-right）。这样导致最右边的item就会产生一个多余的右边距而被挤到下一行去。
当代码是后端渲染后者是循环出来的时候对最右边的item增加class还得不断的判断每个item的索引值，并且当父亲节点宽度改变时有可能最右一个item还在不断的变化中，这个时候就需要对父亲节点完成实现负边距并且在外层实现超出部分隐藏的功能就可以实现。
负边距实现列的多余margin隐藏
负边距实现列超出部分的效果
列表中我们经常会使用到border-bottom来让li与li之间的内容有一个明显的区分，单最后一个li的边框会与外边框连在一起或者重合导致外观上的不好看，一种方法就是使用css3中的最后一个的选择器来实现，li:last-of-type{border-bottom:0 none;}
负边距实现最后一个的border-bottom隐藏
在响应式布局中，经常会用到左边固定右边自适应或者右边固定左边自适应的两栏布局或者三栏布 局，在这种情况中如果不考虑兼容可以使用css的calc函数来实现（100% - 100px）这样的动态计算值，但是这玩意连中国手机端最大的UC浏览器都不支持，所以还是不要想使用了。因此需要用到负边距来实现页面布局。
负边距实现响应式布局
多列等高布局实现起来较为复杂，如果要内容自适应撑大达到等高布局很不好设计，一般的可以使用js来实现高度的自定义，计算那个高度高就用那个。这儿使用极大的padding-bottom来增加高度，然后用负边距拉回来相互抵消达到高度撑满整个父亲节点的效果。
负边距实现等高布局
还有部分应用，例如在实现左右都加入了边框的分页上，可以使用margin-left： -1px。直接实现抵消中间两个item都有边框而导致的边框叠加的效果。在实现元素的宽度或者高度增加的时候，如果100%已经不能达到需要的数字大小时就可以用负边距在增加数值来达到目的。
景样式
1.背景属性缩写
Background: 背景色 背景图片 背景平铺方式 背景定位
例：body {
background-color:# EDEDED;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
缩写后：
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
尺寸样式
1.宽度
width : auto | length
例：
p { width:300px;} div { width:50%;}
2.高度
height : auto | length
例：
img { height:200px;}
div { height:100px;}
边框样式
1.边框线
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例：div { width:300px; height:100px; border-style:solid; ｝
border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
2.边框宽度
border-width : medium | thin | thick | length
例：
div { width:300px; height:100px; border-style:solid; border-width:1px; ｝
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
3.边框颜色
border-color : color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
4.边框样式缩写
border : border-width || border-style || border-color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
缩写后：div {
width:300px;
height:100px;
border:1px solid #FF0000;
}
外边距
margin : auto | length
例：div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left设置左边的外边距
margin-right设置右边的外边距
缩写型式：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距左右边距
margin: 上边距 左右边距 下边距
内边距
padding : length
例：
div { width:300px; height:100px; padding:10px;}
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left设置左边的内边距
padding-right设置右边的内边距
缩写型式：
padding: 上边距 右边距 下边距 左边距
padding : 上下边距左右边距
padding : 上边距 左右边距 下边距
列表样式
1.项目符号
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
katakana | katakana-iroha | lower-latin | upper-latin
例：
ul { list-style-type:disc;}/*实心圆*/
ul { list-style-type:circle;}/*空心圆*/
ul { list-style-type:square;}/*实心方块*/
ul { list-style-type:none;}/*不显示项目符号*/
ol { list-style-type:decimal;}/*阿拉伯数字*/
ol { list-style-type:lower-roman;}/*小写罗马数字*/
ol { list-style-type:upper-alpha;}/*大写英文字母*/
2.自定义项目符号
list-style-image : none | url ( url )
例：
ul {list-style-image:url(images/arrow.gif)}
链接样式
1.链接没有被访问时的样式
a:link
例： a:link { color:#ff0000; }
2.链接被访问后的样式
a:visited
例： a:link { color:#0000ff; text-decoration:none; }
3.鼠标悬停在链接上的样式
a:hover
例： a:link { background-color:#ccc; }
4.鼠标点击链接时的样式
a:active
例：a:active { background-color:#ff0000;}
*请认真填写需求信息，我们会在24小时内与您取得联系。
