好程序员web前端分享CSS不同元素margin的计算

最新推荐文章于 2025-03-21 18:20:10 发布
置顶 最新推荐文章于 2025-03-21 18:20:10 发布
阅读量253 收藏
点赞数
本文详细解析了CSS中不同元素的margin属性计算规则，包括行内级元素、块级元素的置换与非置换状态下的margin表现，以及在auto值下元素如何实现水平居中。

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

好程序员web前端分享CSS不同元素margin的计算：行内级元素

Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0

Inline,置换元素:同上

Inline-block,置换元素在文档流中:同上

Inline-block,非置换元素在文档流中:同上

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

下面的情况下，如果margin值为auto

如果width是auto值，那么其他值是auto的值就为0

如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

块级置换元素，在文档流中

同块级非置换元素一样。

总结

行内级置换元素和非置换元素，在margin值为auto时，margin-left和margin-auto的计算值都为0。

块级置换元素和非置换元素:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

如果width是auto值，那么其他值是auto的值就为0

如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well.

liziqiou
关注
web前端开发之CSS
hu0708的博客
06-30 2982
css
最新Web前端面试题精选大全及答案
热门推荐
HanXiaoXi_yeal的博客
01-07 19万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
CSS：不同元素margin:auto的计算
weixin_34038652的博客
04-02 247
关于什么元素的分类可以看我这篇文章CSS:关于元素高度与宽度的讨论 系列文章（二） 行内级元素 Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0 Inline,置换元素:同上 Inline-block,置换元素在文档流中:同上 Inline-block,非置换元素...
html margin设置,CSS margin详解
weixin_32148861的博客
06-16 1208
1.margin 百分百设置1.1：普通流的 margin 百分比设置在普通流元素中，margin 百分比值得计算是依据其父元素的 width 计算的1.2：绝对定位的 margin 百分比设置在绝对定位元素中，父元素(一直向上查找)若设置了relative/absolute/fixed，则 margin 百分比值是依据父元素的 width 计算的；父元素(一直向上查找)若无设置relative/...
CSS单位加减运算 动态计算长度值calc()
冒烟筒的博客
12-02 914
margin-left： calc（50% + 10px）； // calc() 函数用于动态计算长度值。 // 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； // 任何长度值都可以使用calc()函数进行计算； // calc()函数支持 "+", "-", "*", "/" 运算； // calc()函数使用标准的数学运算优先级规...
好程序员web前端教程分享web前端入门基础知识
qq_35970166的博客
10-17 571
　　好程序员web前端教程分享web前端入门基础知识，作为合格的Web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一两个还不行，必须对这三门语言都要熟悉。下面我们一起来看一看吧！ 1、网页的基本结构(HTML、CSS) HTML是一种标记语言，而不是编程语言，最基本是标签是和，CSS是用来定义如何显示HTML元素的。对HTML+CSS很容易入门，但很多人不够...
Web前端程序员必备 前端面试题汇总（1）
BOM485480的博客
09-30 487
任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次。人力面试一般也就是考察一下个人品质以及薪资问题，而技术岗位则是考察你是否有真才实学。本文和大家分享一个难到了很多前端工程师的面试题：Quirks模式是什么？它和 Standards 模式有什么区别？ 下面就是针对这个问题的讲解。 从 IE6 开始，引入了 Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。 在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很
【HTML+CSS 前端基础与布局实战：从语义化标签到响应式设计指南】HTML与CSS基础及进阶知识点详解：构建网页结构与样式设计
最新发布
06-05
CSS 模块深度解析盒模型：content 区域（width/height）、内边距（padding）、边框（border）与外边距（margin），通过box-sizing: border-box实现自动内减计算。定位系统讲解静态（static）、相对（relative）、...
css盒子模型的宽度不包括margin
weixin_33994444的博客
05-03 2884
看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css盒子模型的宽度</title...
两个元素之间的margin是共享的，padding才是真正私有的
weixin_30362083的博客
09-04 234
CSS样式之盒子模型margin与padding区别 两个元素之间的margin是共享的，padding才是真正私有的 转载于:https://www.cnblogs.com/libig/p/7474500.html
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 5072
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
CSS 相对复杂但实用的margin
weixin_40710412的博客
03-21 855
margin 可以理解为盒子的外边距，决定了盒子与盒子之间的距离。margin包围的盒子尺寸一般称为盒子的"外部尺寸"。外部尺寸和内部尺寸（可视尺寸）和 偏移尺寸 不同，其值可以为负，这就给margin带来了很多有意思的现象和应用，我们常用的左右布局，双飞翼布局，圣杯布局，等高布局，都可以采用负的margin盒子完成！复习一下： 外部尺寸 内部尺寸 偏移尺寸 （滚动尺寸）
CSS 关于margin你应该要知道的
qq_43293207的博客
04-04 2627
1.margin与元素尺寸 我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸 示例： <div class="container"> <div class="child"></div&g
如何不用计算div中的padding，margin等属性？box-sizing: border-box;轻松搞定！
qq_40907228的博客
09-19 2180
设置一个div2，width：100px;height:100px;当设置box-sizing: border-box;属性值时，无论div2中的margin，padding，border，设置为多少，div2总体长宽始终都是100px。          ...
css 中动态获取宽度,css中的calc动态计算长度值
weixin_36085931的博客
08-03 1万+
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...
代码设置margin_css 高度计算你真的会了?!(关于margin)
weixin_42362068的博客
01-12 717
今天看博客,看到一个小伙伴面试字节时的一个问题.问题:父元素container的高度为多少?(代码如下)<div class="container"> <div class="inner"/> <div class="inner"/> </div> .container { border: 1px; } .i...
关于前端的margin
weixin_33733810的博客
08-28 390
margin 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 ...
Java程序员必须了解的CSS核心技巧
在当今的Web开发领域中，虽然Java和CSS分别属于不同的技术栈，但作为一名Java程序员，在项目开发过程中经常需要与前端技术打交道，因此掌握一定的CSS知识是非常有益的。下面将详细介绍Java程序员应该掌握的CSS知识。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值