margin 和 padding 的区别

简介:

通俗的讲法:

padding:内边距,如果以border为界限的话,在border里。

margin:外边距,在border外。


相同点:参数相同 (a,b,c,d)->(上,右,下,左)


举个例子,很容易看出:

css样式:

1
2
3
4
5
6
7
8
div{
     width : 100px ;
     height : 100px ;
     border : 2px  solid  blue ;
     padding : 10px  10px  10px  10px ;
     margin : 10px  10px  10px  10px ;
     background-color : black ;
}

body部分很简单,就只有一个空的<div></div>.



本文转自 爱笑嘚蛋蛋 51CTO博客,原文链接:http://blog.51cto.com/dd118/1672953,如需转载请自行联系原作者

相关文章
|
4月前
|
编解码
px,em,rem,vw,vh之间的区别
px,em,rem,vw,vh之间的区别
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
53 0
你不知道的border-style border-radius background
你不知道的border-style border-radius background
html+css实战100-border和padding
html+css实战100-border和padding
82 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
80 0
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
389 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
|
前端开发 开发者
Padding | 学习笔记
快速学习 Padding。
|
前端开发 开发者
margin | 学习笔记
快速学习 margin。
127 0