如何不用计算div中的padding，margin等属性？box-sizing: border-box;轻松搞定！

最新推荐文章于 2025-06-06 17:08:38 发布
原创 最新推荐文章于 2025-06-06 17:08:38 发布 · 2.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了CSS中box-sizing:border-box属性的作用。当应用于一个元素时，即使修改该元素的内边距、边框样式，其实际占用的空间大小保持不变。

设置一个div2，width：100px;height:100px;当设置box-sizing: border-box;属性值时，无论div2中的margin，padding，border，设置为多少，div2总体长宽始终都是100px。

 

 

 

 

 

夜落江痕
关注
深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1676
深入理解 `box-sizing: border-box;`：CSS 布局的利器
css篇-盒子模型理解
G294992891的博客
11-08 558
前言 在CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。 语法： box-sizing属性被指定为下面列表中的关键字。 属性值 content-box 默认值，标准盒子模型。width与height只包括内容的宽和高， 不包括...
css-margin、padding
qq_59950604的博客
01-05 775
盒子模型组成部分：4部分 1、内容：content 2、边框：border 3、内边距：padding 4、外边距：margin border的连写： border：width style color border: 10px solid blue; 注意点： 1、书写顺序：推荐写法去写 2、省略问题：不要省略！！！ 3、层叠问题： 单独写的样式写在连写的下面 给单独方向设置边框： border-方位名词（top、right、bottom、left） ...
css3新属性总结
weixin_44559272的博客
09-08 202
box-sizing: border-box; 不用计算padding值 filter：blur(5px); 滤镜效果，是图片模糊 filter: grayscale(100%); 使图片变黑白 width:calc: (100% - 120px); 两边有30px的间隙,搭配 position: absolute;left: 60px; 使用 transition：属性 过度时间 过度方式(默认ease) 开始时间; css3过渡 例如：transiton：width 1.5
由浅入深漫谈margin属性1
weixin_34143774的博客
08-20 184
margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。 （该文章解释是否正确有待商榷，目前我的实验结果为:在默认情况或者div左浮动的情况下：margin-top/margin-left是有效的，margin-right/margin-bottom是无效的；当右浮动时，margin-right/margin-top是有效的。） ...
由浅入深漫谈margin属性
camel0564的专栏
03-27 722
margin在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。一、margin的基本特性margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以 用来设置box的margin area。属性margin可以用来同时设置box的四边外边距，而其他的mar
<div style="max-width: 775px; margin: 0 auto; background-color: #ffffff; overflow: hidden; box-sizing: border-box;"> <!-- 主内容区域 --> <div style="background-color: #141414; padding: 80px;padding-bottom: 106px; color: #ffffff; box-sizing: border-box;"> <!-- Logo --> <div style="margin-bottom: 48px; box-sizing: border-box;"> <img src="https://test-static.playol.com/static/imgs/header.png" alt="PlayOL Logo" style="width: 100px; height: 100px; display: block; box-sizing: border-box;"> </div> <!-- 问候语 --> <div style="font-size: 36px; margin-bottom: 36px; color: #BFBFBF; box-sizing: border-box;height: 49px;"> ${email}, 您好! </div> <!-- 邀请文本 --> <div style="font-size: 36px; font-weight: 600; margin-bottom: 8px; box-sizing: border-box;height: 49px;"> 欢迎来到palyOL </div> <div style="text-align: left; box-sizing: border-box;margin-bottom: 24px;"> 这是您的验证码： </div> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 32px; box-sizing: border-box;height: 49px;"> <span style="font-size: 36px; font-weight: 600; box-sizing: border-box;">${code}</span> </div> <!-- 有效期说明 --> <div style="font-size: 14px; color: #cccccc; text-align: left; line-height: 1.6; box-sizing: border-box;margin-bottom: 80px; "> 验证码有效期为5分钟。请勿将验证码透露给他人。如非本人操作，您可以忽略这封邮件。 </div> <!-- 结尾语 --> <div style="padding-left: 24px; border-left: 4px solid #FF1F1F; box-sizing: border-box;"> <div style="font-size: 16px; box-sizing: border-box;">祝您游戏愉快，</div> <div style="font-size: 16px; font-weight: 600; box-sizing: border-box;">PlayOL团队</div> </div> </div> <!-- 邮件底部 --> <div style="background-color: #ffffff; padding: 60px; padding-left: 80px; color: #000000; border-top: 1px solid #e0e0e0; box-sizing: border-box;"> <!-- 系统提示 --> <div style="font-size: 13px; margin-bottom: 20px; text-align: left; box-sizing: border-box;"> 这封电子邮件由系统自动生成,请勿回复。 </div> <!-- 游玩网址 --> <div style="text-align: left; margin-top: 34px;margin-bottom: 50px; font-size: 14px; box-sizing: border-box;"> <div style="margin-bottom: 5px; box-sizing: border-box;">游玩网址</div> <a href="https://playol.com" target="_blank" style=" text-decoration: none; box-sizing: border-box;font-size: 18px;color: #000000; ">https://playol.com</a> </div> <!-- Footer Logo --> <div style="text-align: left; margin-bottom: 24px;box-sizing: border-box;"> <div style="display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;"> <img src="https://test-static.playol.com/static/imgs/logo.png" alt="PlayOL Logo" style="width: 160px; height: 48px; box-sizing: border-box;"> </div> </div> <!-- 版权信息 --> <div style="text-align: left; font-size: 12px; line-height: 1.8; box-sizing: border-box;"> <span style="font-weight: 700;">© PalyOL Corporation. All Rights Reserved.</span><br> 保留所有权利。所有商标均为其在x国及其他国家/地区的各自持有者所有。 </div> </div> </div> 给每一行后边加/
最新发布
11-04
box-sizing: border-box;">\ <!-- 主内容区域 -->\ <div style="background-color: #141414; padding: 80px;padding-bottom: 106px; color: #ffffff; box-sizing: border-box;">\ <!-- Logo -->\ <div style=...
元素边框和边距设置
老杨头的博客
11-22 3162
边距和边框设置是网页排版布局中的常用设置。边距分为外边距和内边距。 CSS 盒模型的尺寸构成如下图所示： 一个盒模型占用的尺寸从内到外分别是宽度和高度(width,height,上图100x60部分)、内边距(padding上图10表示的部分)、边框(border上图20表示的部分)、外边距(margin上图30表示的部分)。 1、外边距margin margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是margi...
box-sizing:border-box;的一些坑
zhuhaomingoo的博客
01-25 1万+
近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命，很费时间，情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签，高度是16px,左右padding各5px，line-height自然而然就是16了。但这时就会出现图一的情况文字上下并不是剧中的。从正常逻辑思维出发，我找不到一丝纰漏怎么改也不对怎么给都是剧中不...
【css】border边框影响布局解决方案，鬼话连篇版本
sinat_27171121的博客
03-11 4353
问题的关键究竟为何？ border边框影响布局之问题的发生，到底需要如何解决，这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 一般来说， 培根曾经提到过，深窥自己的心，而后发觉一切的奇迹在你自己。这不禁令我深思。 曾经看到过过一句富有哲理的话，有时候实践是一种巧妙地避开思考的方法。带着这句话，我们还要更加慎重的审视这个问题： 编程实践中，若border边框影响布局出现了，我们就不得不考虑它出现了的事实。 mark {background: yellow; } mark.current {
box-sizing:border-box的理解和作用
热门推荐
Ghjkku的博客
06-02 13万+
要想清楚这个属性的作用，首先要理解盒子模型盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）可以把每一个容器，比如div，都看做是一个盒子模型比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red;这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）相当于一个元素的实际宽高是由
不会去计算padding和border的值  元素的宽度就是给的宽度
wmsocool的博客
03-24 713
.box { width: 300px; height: 300px; border: 10px solid red; /* box-sizing: border-box; 不会去计算padding和border的值 元素的宽度就是给的宽度 border和pad...
让padding、border等不占据宽度
wei_jie_zhang的专栏
10-08 1万+
box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */
css设置忽略padding的数值
weixin_33895657的博客
10-18 982
有时候，设置了div的padding值，但是又不想让padding值，占整个div的宽度： 　例如： padding-top: 6px;解决方法： box-sizing: border-box; 转载于:https://www.cnblogs.com/yuan-luo/p/7685807.html...
不让padding影响元素的宽度
weixin_30642305的博客
10-26 993
CSS3 新增了 box-sizing 属性。 以前，如果指定 div 的宽度为 div { width: 100px; height: 100px; padding: 10px; } 则包含 padding，div 的实际宽度为 120px。 有时我们不希望 padding 影响到 div 的实际宽度。以前只...
css设置padding不会撑大父级
qq_40924516的博客
04-04 3733
用的时候每次都忘记，在这里记录一下。一般是给父级设置这个属性。 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ ...
CSS的盒子模型，padding，margin，box-sizing
qq_45897045的博客
07-14 383
CSS的盒子模型 一个盒子具备四个属性： content（内容）：元素的内容width，height padding（内边距）：元素和内容之间的间距 border（边框）：元素自己的边框 margin（外边距）：元素和其他元素的间距 除内容content外，其他的margin/padding/border有top/right/bottom/left四个边 盒子模型示例图： 注意：对于行内级非替换元素，设置宽高是无效的 width的默认值：auto 最大，
CSS盒子模型——box-sizing属性、margin叠加和传递问题
BeWorriedJava的博客
03-10 1198
盒子模型： 盒子模型包括content（内容区域）->padding（内边距）->border（边框）->margin（外边距）。 注： 1、背景颜色会填充到margin以内的区域。 2、文字会在content区域。 3、padding不能出现负值，margin可以出现负值。 标准盒子模型： 标准盒子模型的width和height设置的宽度和高度指的是content区域的大小。 box-sizing属性： box-sizing属性翻译就是盒尺存属性。即改变盒
CSS 中的 `box-sizing` 属性详解
weixin_43991457的博客
06-06 1208
box-sizing是CSS控制元素宽高计算方式的属性，决定padding和border是否计入宽高。它有两个主要取值：content-box（默认值，宽高仅含内容区域）和border-box（宽高包含padding和border）。content-box需要手动计算总宽度，而border-box更直观实用，因此开发中常全局设置box-sizing: border-box以避免布局问题。该属性还有inherit值可继承父元素设置。实际项目中推荐使用border-box简化布局计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值