CSS学习之margin与padding

本文详细介绍了CSS中margin和padding属性的用法。包括如何设置元素的外边距和内边距,以及如何通过简写属性同时设置不同方向的边距。此外,还解释了在不同元素类型中应用这些属性时的特殊情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS margin 属性

margin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。

说明

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

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

 

 

四个边距均为10px:

h1 {margin: 10px}

顶边距和底边距为10px,左边距和右边距是父元素宽度的2%:

h1 {margin: 10px 2%}

顶边距为10px,左边距和右边距是父元素宽度的2%,底边距是-10px:

h1 {margin: 10px 2% -10px}

顶边距为10px,右边距是父元素宽度的2%,底边距是-10px,而左边距由浏览器设置:

h1 {margin: 10px 2% -10px auto}

 

CSS padding 属性

 

 

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

 

转载于:https://www.cnblogs.com/zonghua/archive/2008/08/18/1270196.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值