微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

CSS：不同元素margin的计算_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:22:01
原创
1831人浏览过

关于什么元素的分类可以看我这篇文章 css:关于元素高度与宽度的讨论 系列文章（二）

行内级元素

  • 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

算家云
算家云

高效、便捷的人工智能算力服务平台

算家云 37
查看详情 算家云

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

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

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

同块级非置换元素一样。

总结

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

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

    '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，使用的值相等，那么就相对于包含块水平居中。

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：html文本垂直居中对齐_html/css_WEB-ITnose 下一篇：PS学习_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
使用 JavaScript 获取和修改元素样式 本文档详细介绍了如何使用JavaScript来获取和修改HTML元素的样式。通过结合classList属性和条件判断，可以实现动态地改变元素的外观，从而增强用户交互体验。本文将提供代码示例，并讲解如何避免常见的错误，从而高效地操作元素样式。
2025-11-18 11:01:02
892
HTML图片超链接实现指南 本文详细阐述了如何在网页中为图片正确添加超链接，确保点击图片后能成功跳转到目标URL。核心在于将标签恰当地嵌套在标签内部，并配置href属性。文章提供了清晰的代码示例和实用建议，帮助开发者避免常见错误，实现功能完善的图片链接。
2025-11-18 11:00:32
616
在Angular应用中实现点击链接打开邮件客户端功能 本文旨在指导开发者如何在Angular应用中通过HTML的mailto:协议，实现点击链接自动打开用户默认邮件客户端的功能。该方法不直接发送邮件，而是利用浏览器能力预填充收件人、主题和正文，极大地提升用户体验，适用于需要用户主动发送邮件的场景。
2025-11-18 11:00:10
679
JavaScript与HTML：利用Cookie实现测验按钮的持久禁用 本教程详细讲解如何利用JavaScript和浏览器Cookie实现测验开始按钮的持久禁用。针对页面刷新后按钮状态无法保持的问题，文章提供了一套解决方案：在按钮点击时设置Cookie，并在每次页面加载时检查Cookie状态以控制按钮的禁用。这确保了按钮在指定时间内保持非活动状态，有效防止用户重复启动测验。
2025-11-18 10:59:13
966
获取视频时长：使用 JavaScript 从视频链接中提取时长信息 本文介绍了如何使用JavaScript从视频链接中提取视频时长。通过监听loadeddata事件，确保视频元数据加载完毕后，即可访问视频的duration属性，从而获取视频的时长信息。本文提供详细的代码示例，帮助开发者轻松实现此功能。
2025-11-18 10:58:23
777
Flask 应用中 HTML 文本显示的最佳实践 本文旨在解决Flask应用中HTML页面文本内容无法正常显示的问题，尤其是在CSS和Favicon均正常加载的情况下。核心原因在于将文本直接置于标签内不符合HTML规范及最佳实践。教程将详细阐述如何通过使用或等语义化标签来正确包裹文本内容，确保在各类浏览器中实现稳定、可控的文本渲染，并提升页面的可维护性和可访问性。
2025-11-18 10:57:24
250
动态加载HTML Select下拉选项的JavaScript教程 本教程详细指导如何使用JavaScript动态地为HTML下拉列表加载选项。文章将涵盖从正确选取DOM元素（特别是使用querySelector通过类名选择时需注意.前缀）到清除现有选项、创建新选项并将其添加到下拉列表的完整过程，并提供实用的代码示例和注意事项，帮助开发者高效实现动态表单功能。
2025-11-18 10:53:35
437
CSS定位技巧：在文本下方优雅地放置装饰性图形 本教程详细阐述了如何利用CSS的定位属性在文本内容下方放置装饰性图形，无论是通过CSS伪元素创建圆形/椭圆，还是定位现有图片。核心在于父元素使用position:relative，子元素或伪元素使用position:absolute并结合z-index:-1实现层叠效果。同时，文章也强调了使用CSS控制文本宽度而非标签进行换行的最佳实践。
2025-11-18 10:50:19
814
CSS技巧：优雅地处理元素内容与::after伪元素之间的尾随空格 本文介绍一种CSS技巧，旨在解决HTML元素内容与其::after伪元素之间因尾随空格引起的不一致显示问题。通过在::after内容前添加一个空格并利用负外边距进行视觉抵消，可以确保无论HTML源代码中是否存在尾随空格，最终渲染效果都保持一致且紧凑，同时兼顾可访问性。
2025-11-18 10:35:12
219
CSS样式覆盖与选择器优先级：解析Margin不生效的原因 本文深入探讨了CSS样式不生效的常见原因——选择器优先级（Specificity）。通过分析一个Margin属性被意外覆盖的案例，详细解释了CSS优先级的工作原理、不同选择器类型的权重，并提供了具体的代码示例和最佳实践，旨在帮助开发者避免样式冲突，实现可预测的页面布局。
2025-11-18 10:22:02
813
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部