当前位置: 首页 > 知识库问答 >
问题:

前端 - css计算盒子大小时margin到底何时算进去合适?

公羊安怡
2023-07-11

盒模型计算一个div大小时是不会算入margin的,可我在写页面时往往会感觉margin有些情况下是要考虑的,尤其是在父子情况下,子盒子的margin是要算尽父盒子大小的,所以我比较疑惑的是计算元素实际大小怎么总结合适呢?

共有1个答案

罗淮晨
2023-07-11

一般来说不需要考虑 margin 的问题。 除非你在考虑一些自适应布局的情况下。但是这种就得具体情况具体分析了。

大部分情况下,如果外部容器没有设置 padding,子容器的 margin 是会和外部容器的 margin 合并的,具体可以参考 �� 外边距重叠 - CSS:层叠样式表 | MDN
如果有设置 margin 则需要把 margin 计算进来。

但其实大部分情况下我们并不需要考虑 margin 导致的外部容器宽度改变,因为大部分情况困扰我们的是在固定宽度的场景下,需要做留白(padding),那么就需要考虑使用不同的盒模型 (border-boxcontent-box)如果固定宽高,但留白内容不计算在内使用 content-box,如果需要将留白计算在内则使用 border-box

剩下的绝大部分,我们都是在使用 margin: auto 0 来做居中布局,或者单独配置 margin-right 等等来设置元素间距,比如说这样 �� 弹性布局(flex布局)中使用gap的兼容性问题应该如何解决?

 类似资料:
  • Java标准库中的大多数集合(如ConcurrentLinkedQueue、Concurrent LinkedDequeue和ConcurrntSkipListSet)的文档都附带以下免责声明: 注意,与大多数集合不同,size方法不是一个恒定时间的操作。由于这些集合的异步性质,确定元素的当前数量需要遍历元素,因此如果在遍历过程中修改了集合,可能会报告不准确的结果。 那是什么意思?为什么他们不能保

  • 在深入研究CSS单元时,我遇到了参考像素的定义。然而,我无法找到一个关于它与CSS像素单元的关系的一致和全面的描述。我对这件事做了一些研究,但对我来说还是有点不清楚。 像素有两种不同的类型/定义: “设备像素”-显示器上的单个物理点。 和: CSS像素-与参考像素最匹配的单位。[1] 两个名字相同的平行概念绝对不能澄清混淆。我完全明白介绍第二个的目的,但我觉得它的命名有误导性。CSS像素被分类为绝

  • 这是我到目前为止所拥有的,我需要把每小时英里数变成一个没有小数点的数字,我一直在思考如何做到这一点。任何帮助都将不胜感激。 另外,如果我发错了,我很抱歉这是我第一次发错

  • 我刚刚开始学习JavaFX来构建桌面应用程序,目前还没有任何个人培训。现在关于这个问题,我正在尝试做一个自定义布局,它的大小取决于它的孩子的整体大小。我的问题是在计算高度和宽度时得到每个孩子的尺寸。这里,我使用< code>getLayoutBounds()方法来检索孩子的尺寸,但是在我的例子中,它总是返回0: 所以我想这是关于布局传递的(比如说,孩子还没有布局)。但是不管怎样,如果这里是不是这样

  • 问题内容: 我正在尝试计算光盘上文件的大小。在Java的7本可以用做Files.walkFileTree如图我的答案在这里。 但是,如果我想使用java-8流来执行此操作,则它将适用于某些文件夹,但不适用于所有文件夹。 上面的代码可以很好地用于路径,但是会抛出以下异常 我了解它的来源以及如何使用Files.walkFileTree API避免它。 但是如何使用Files.walk() API 避免

  • css 怎么让盒子一直处于底部 如图,这样是正常的,没有问题: 但我点“上箭头”后变成了 视图代码: 样式代码 点击“上箭头”触发的事件