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,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发
前端:行内元素的 margin 和 padding
在前端开发中,行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示,不会占据独立的空间。对于行内元素而言,其外边距(margin)和内边距(padding)的设置有特定规则:垂直方向上的外边距和内边距不会影响其他元素,但水平方向的则会增加元素的宽度,可能会影响相邻元素的位置。合理设置这些属性,可以有效控制页面布局与间距。
|
4月前
|
前端开发
一张图搞懂盒子模型 margin padding
这篇文章通过一张图帮助读者理解CSS中的盒子模型,特别是`margin`和`padding`的概念,解决容易混淆这两个属性的问题。
|
5月前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
124 1
|
5月前
|
Android开发
android padding和margin的区别
android padding和margin的区别
39 0
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1136 0
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
515 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
html+css实战100-border和padding
html+css实战100-border和padding
104 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
115 0
|
前端开发 开发者
Padding | 学习笔记
快速学习 Padding。
124 0
|
前端开发 开发者
margin | 学习笔记
快速学习 margin。
171 0