margin左右边距(margin边际)

http://www.itjxue.com  2023-01-25 07:08  来源:未知  点击次数: 

html中margin跟padding是什么意思?

margin的定义和用法:

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

例如:设置 p 元素的 4 个外边距:

p

{

margin:2cm 4cm 3cm 4cm;

}

例1:

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

例2:

margin:10px 5px 15px;

上外边距是 10px

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

下外边距是 15px

例3:

margin:10px 5px;

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

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

padding的定义和用法:

padding 属性设置元素的内边距。

padding 属性定义元素边框与元素内容之间的空间。

该属性可采取 4 个值:

如果规定一个值,比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。

如果规定两个值,比如 div {padding: 50px 10px} - 上下内边距是 50 px,左右内边距是 10 px。

如果规定三个值,比如 div {padding: 50px 10px 20px} - 上内边距是 50 px,左右内边距是 10 px,下内边距是 20 px。

如果规定四个值,比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px,右内边距是 10 px,下内边距是 20 px,左内边距是 30 px。

网页制作中margin是什么意思,为什么后面还要跟个0?

默认情况下,html标签都有margin属性外边距,如果不设置0,会有间距不好看,为了清理这个默认的间距,所有需要给元素设置css属性margin:0

margin:0 为简写,意思是上下左右全部设置外边距为0,如果要设置右间距为10px,其它方向为0

可以这么设置 margin:0 10px 0 0 意思为 上外边距为0 右外边距为10px 下外边距为0 左外边距为0

写到这里应该明白了吧 margin简写顺序为 上 右 下 左

更多教程:lanye.org

css左右边距怎么设置

左右边距是子元素距离父元素左边或者右边的距离。可以用margin-left和margin-right来设置左右边距。

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

下面讲解 padding和margin常用的用法

一、padding

1、语法结构你可以去5 1 r g b

(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; 上、右、下、左内边距

2、可能取的值

(1)length 规定具体单位记的内边距长度

(2)% 基于父元素的宽度的内边距的长度

(3)auto 浏览器计算内边距

(4)inherit 规定应该从父元素继承内边距

3、浏览器兼容问题

(1)所有浏览器都支持padding属性

(2)任何版本IE都不支持属性值“inherit”

二、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; 上、右、下、左外边距

2、可能取的值

(1)length 规定具体单位记的外边距长度

(2)% 基于父元素的宽度的外边距的长度

(3)auto 浏览器计算外边距

(4)inherit 规定应该从父元素继承外边距

3、浏览器兼容问题

(1)所有浏览器都支持margin属性

(2)任何版本IE都不支持属性值“inherit”

margin和padding的区别用图表示为:

margin边距计算规则

margin:20px 0;是设置的边框上下边距是20px,而左右边距是0px;

所以当你设置float:left;的时候,它的上下边距还是20px,左右边距还是0px;

而且,div 本来就是块级元素,所以不需要你申明display:block;

CSS里的padding、margin分别是啥意思?

Padding(填充)属性定义元素边框与元素内容之间的空间。

Padding属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。单独使用填充属性是在一个声明中设置元素的所内边距属性。缩写填充属性也可以使用,一旦改变一个数值,则padding对应的距离都会改变。

扩展资料:

可能的值:

auto:浏览器计算外边距。

length:规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

%:规定基于父元素的宽度的百分比的外边距。

inherit:规定应该从父元素继承外边距。

内外距离区别:

margin与padding如何进行区分,这是很多学html人的困扰,其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。

参考资料来源:百度百科-padding

(责任编辑:IT教学网)

更多