关于padding border margin的问题

最新推荐文章于 2023-02-11 19:19:24 发布
最新推荐文章于 2023-02-11 19:19:24 发布
阅读量473 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_yangyimeng/article/details/124129555
版权
本文介绍了CSS盒模型中padding和border如何增加元素面积，以及margin的叠压现象和margin塌陷问题的原因及解决方案。针对margin塌陷，提出了通过设置padding、border或使用overflow: hidden来避免的方法。
摘要由CSDN通过智能技术生成

padding border  会增加盒模型面积
margin：
    叠压现象：两者之间的间距以大值为准
    塌陷问题：
        原因：父级的第一个子级是块标签，并使用了margin或者margin-top
        解决方案：1、不使用margin，在父级使用padding-top
                         2、给父级一个border
                         3、在父级使用overflow：hidden（溢出隐藏）

胡乱吞咽光明
关注
CSS的Padding, Margin, Border 的区别
oscar999的专栏
12-16 1122
CSS 的Padding 、Margin 和Border 设置原理。 盒子模型
padding/margin/border
weixin_43865846的博客
11-14 140
关于padding、margin、border的使用 假如两个盒子，父盒子包含子盒子，子盒子中存放内容。 padding padding是内容距离子盒子的距离，padding：10px，内容距离子盒子的上下左右各10像素。 一个值 ：还可以确定不同位置的padding值：padding-left:10px，内容距离盒子左面10px。padding-right:10px；padding-button：10px； padding-top：10px ，效果一样 两个值：pading：10px 20px；前面一
css中margin padding border的区别
m0_51499496的博客
10-30 259
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 margin padding border的区别 文章目录paddingbordermargin总结 padding border margin padding： 指标签里面的内容到border的这部分为padding，是指到border靠近padding这条边界线的距离。假如我们把这个抽象化，用我们家里面的想相框来比喻。centent值的就是相框里面的照片。假设这个照片并不是全部布满相框，也是可以随意移动。就是如果这个相框是400
css的padding和border问题
dianbiaofu0438的博客
12-14 269
第一步：先跟据需求定义一个div，要求width为300px，height为300px； 第二步：给该div添加一个边框，要求实线，宽度10px，粉色； 第三步：给该div再设置20px的内边距； 我们发现这个div随着border和padding的设置一直在变大。此时div的占位宽度为：width+padding+border=300+20*2+10*2=...
css 父级设置了padding，但是子元素还是会超过padding解决方案
Technology_hands的博客
11-22 2623
我看了一下，是因为子元素，设置了width100%,以后还设置了padding,导致的问题，因为我们的盒子是标准盒子模型，width的宽度只是内容content的宽度，加上padding就会导致大于100%，所以有两个解决方案，一个是将盒子模型转换成怪异盒子模型，（box-sizing:border-box），一个是在移动端不要使用width:100%，的情况下就使用padding就不会超过100%。由上图所示，明明父级已经设置了一个padding,但是子元素还是跑出来了，这是为什么呢？
【css】border边框影响布局解决方案，鬼话连篇版本
sinat_27171121的博客
03-11 4212
问题的关键究竟为何？ border边框影响布局之问题的发生，到底需要如何解决，这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 一般来说， 培根曾经提到过，深窥自己的心，而后发觉一切的奇迹在你自己。这不禁令我深思。 曾经看到过过一句富有哲理的话，有时候实践是一种巧妙地避开思考的方法。带着这句话，我们还要更加慎重的审视这个问题： 编程实践中，若border边框影响布局出现了，我们就不得不考虑它出现了的事实。 mark {background: yellow; } mark.current {
详解盒模型大小取决于它的padding，margin，border数值
11-21
盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容...
各浏览器padding、margin的差异
10-31
在网页设计与开发过程中，经常遇到的一个问题是不同浏览器对CSS属性（如`padding`和`margin`）的解释存在差异。这种差异可能导致页面布局在不同浏览器中的表现不一致，进而影响用户体验。本文将详细探讨各浏览器中`...
css下margin、padding、border、background和font缩写示例
10-30
本文将详细介绍如何对`margin`、`padding`、`border`、`background`和`font`等属性进行缩写，以及在特定情况下的使用技巧。 首先，`margin`属性用于设置元素的外边距，它有四种可能的值：上、右、下、左。当所有...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...
内联元素的padding，margin，border等不起作用的原因
不服输的小白
10-15 5262
内联元素的padding，margin，border等不起作用的原因
浅谈CSS3的box-sizing属性
筱葭的博客
03-09 1991
box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。 假如需要并排放置两个带边框的框，可通过将box-sizing设为"border-box"，令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。   box-sizing：content-box | border-box 默认值：content-box 适用于：所有接受width和height的元素
前端面试题
sh1alin的博客
07-13 701
前端面试题精选 HTML CSS 1.css盒子模型 标准盒子模型：box-sizing：content-box width不包括padding和border IE盒子模型又叫怪异盒模型：box-sizing：border-bo width包括padding和border 2.HTML5新增的内容 语义化标签：Header、Nav、Section、Footer等 优点：1.提升可访问性 2.seo 3.结构清晰，利于维护 多媒体标签、表单元素 3.Css3新增的特性 边框：border-radius、
CSS 增删边框（border） 为什么会导致 位置移动？可能是因为子元素的 margin！
最新发布
henry2k888的博客
02-11 1088
去掉一个仅 1px 粗的边框（border），竟使整个元素远距离地移动？？来了解一下 margin collapse 吧。
解决在网页前段开发中盒子模型的宽度包含padding和border的问题
x_dreamfly的专栏
04-24 3791
      在网页前段开发中，由于各大浏览器厂商核心技术不一样，出现了浏览器兼容性的问题，经常会出现在盒子模型中包含padding和border的问题，遇到这样的问题我们该如何解决呢？       首先，我们先看一下标准的盒子模型：    盒子模型由四部分组成：content（width、height）、padding、border、margin    以上盒子模型中，210*26便是盒子的wid...
让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、Border、Margin属性的理解
cslover的博客
05-17 4815
作为一个志在AIot(实际在写上位机程序、嵌入式代码)的工程师，怎么又关心起前端来了呢？怎么说呢，前端的应用范围广啊，从高大上的算法、富有科技感的物联网应用到无处不在的Web应用，只要是需要和终端用户交互的，不都得要用到前端，所以懂点前端是能防身的。 今天就研究一下CSS中的content、padding、border、margin这几个概念。 CSS是网页的样式文件，它让网页的布局和样式变得美观和丰富多彩，而使用CSS进行布局与设计要用到一个叫做Box Model的模型，这是W3C提出的，W3C说Box
Div宽度是否包含Padding_Border——box-sizing
qq290063295的博客
04-07 6045
CSS盒式模型的宽度与Padding的关系
关于border、padding以及margin
todaysjava的博客
05-14 640
1.Border 将border理解为衣服（外套类型），可以设定衣服的颜色和尺寸大小 border{20px（20码）red（红色）solid（虚实线）} 2.Padding padding内搭衣服，可以上下左右全方位的设定大小，那么外套必然包裹内搭 padding-top:100px; 上 padding-bottom-100px; 下 padding-left:100px; 左 padding-right:100px; 右 简写 padding：100px； （上下左右）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值