CSS中margin和padding的区别

如题所述

盒模型的外边距和内边距:

    margin是对外的,padding是对内的。

margin    åœ¨ä¸€ä¸ªå£°æ˜Žä¸­è®¾ç½®æ‰€æœ‰å¤–边距属性。       

margin-bottom    è®¾ç½®å…ƒç´ çš„下外边距。

margin-left    è®¾ç½®å…ƒç´ çš„左外边距。

margin-right    è®¾ç½®å…ƒç´ çš„右外边距。

margin-top    è®¾ç½®å…ƒç´ çš„上外边距。    


2.margin样式的简写方式,padding同理:


例子 1

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px


例子 2

margin:10px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px


例子 3

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px


例子 4

margin:10px;

所有 4 个外边距都是 10px

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-05-01
通俗地说——
padding 就是内容与边框的距离;
margin 就是边框与其他元素的距离。本回答被网友采纳
第2个回答  2016-05-04
一、padding

1、语法结构

(1)padding-left:10px; 左内边距

(2)padding-right:10px; 右内边距

(3)padding-top:10px; 上内边距

(4)padding-bottom:10px; 下内边距

(5)padding:10px; 四边统一内边距

(6)padding:10px 20px; 上下、左右内边距

(7)padding:10px 20px 30px; 上、左右、下内边距

(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

二、margin

1、语法结构

(1)margin-left:10px; 左外边距

(2)margin-right:10px; 右外边距

(3)margin-top:10px; 上外边距

(4)margin-bottom:10px; 下外边距

(5)margin:10px; 四边统一外边距

(6)margin:10px 20px; 上下、左右外边距

(7)margin:10px 20px 30px; 上、左右、下外边距

(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

padding与margin的区别?
Padding和Margin都是CSS中用于控制元素周围空间的方式,但它们的主要区别在于其影响范围和功能。区别解释:1. 定义和功能差异 Padding是元素边框内部的空间,它增加了元素内容和边框之间的空间。当我们在一个元素周围设置padding时,实际上是增加了该元素内部内容的空间。Margin则是元素边框外部的空间,用于控制...

CSS中margin和padding的区别
CSS中margin和padding的区别如下:1、定义方面的区别:边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。padding称为内边距,其判断的依据即边框离内容正文的距离,官方说法叫补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区...

CSS中margin和padding的区别
CSS中margin和padding的区别如下:1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离.如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。 如果只提供一个,将用于全部的四边。 如果提供两个,第一个用于上-下,第二个用于左-右。 如果提供三个,第一个用于...

padding与margin的区别?
2. 应用范围不同 Padding 作用于元素内容,改变元素的内部尺寸。因此,如果对元素应用了 padding,其总的宽度和高度会相应增加。Margin 作用于元素外边框,不会影响元素的内部尺寸。它只是增加了元素与相邻元素之间的空间,而不会改变元素本身的尺寸。3. 对页面布局的影响不同 Padding 增加的内部空间可能...

CSS中margin和padding的区别
CSS中margin和padding有以下三方面区别。在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。1、语法结构。padding:padding-left:10px; 左内边距、padding-right:10px; 右内边距、padding-top:10...

CSS中margin和padding的区别
margin指的是外边距,是元素跟元素之间的距离,例如div和div,div和p元素之间的距离。padding指的是内边距,指的是元素和内容之间的距离,例如p元素内的内容跟p元素之间的距离。

CSS中margin和padding的区别
区别如下:1、margin是一个盒子和另一个盒子的距离,而padding是盒子内部元素距边框的距离。2、相关的盒子模型图如下:

CSS中margin和padding的区别
margin:是元素外边缘往外延伸的距离,,会改变元素的位置,不会改变元素的实际大小。padding:是元素内边缘往内延伸的距离,会导致元素整体的大小增大。比如一个元素宽度是100px,高度是100px,标记为①,这个元素的右边再放一个元素也是100x100② 如果给②这个元素加个margin-left:10px; 两个元素之间...

CSS中margin和padding的区别
一、padding 1、语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10px; 四边统一内边距 (6)padding:10px 20px; 上下、左右内边距 (7)padding:10px 20px 30px; ...

CSS中margin和padding的区别
1、margin和padding样式最简单的区别方法是使用border边框来验证。2、margin是外边距的意思,是指从border界限以外边框距离附近元素的距离。3、padding好比是“一个盒子里的填充物”,是指border界限以内边框到盒子里内容元素的距离。盒子模型图解如下:...

相似回答