盒子模型

本文详细介绍了 CSS 中的盒模型概念,包括 Margin、Border、Padding 和 Content 的定义及其如何共同构成元素的总宽度和高度。此外,还讲解了 Margin 和 Padding 的不同设置方式及其效果。

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


Margin:完全透明的外边框

Border:中间的填充部分,受盒子的背景颜色影响

Padding:内边框,受盒子的背景颜色影响

Content:盒子的内容,显示文本和图像


元素的总宽度:width+2*(Margin+Border+Padding)

元素的总高度:height+2*(Margin+Border+Padding)


Margin:

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px


margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px


margin:25px 50px;
上下边距为25px
左右边距为50px


margin:25px;
所有的4个边距都是25px


Padding:

padding:25px 50px  75px 100px

上填充为25px
右填充为50px
下填充为75px
左填充为100px


padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px


padding:25px 50px;
上下填充为25px
左右填充为50px


padding:25px;
所有的填充都是25px


CSS Outlines(轮廓)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值