当前位置： 首页 > news >正文

CSS外边距

news 2026/3/29 0:50:54

元素的外边距（margin）是围绕在元素边框以外（不包括边框）的空白区域，这片区域不受 background 属性的影响，始终是透明的。

为元素设置外边距

默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML
元素设置默认的外边距，例如<p>元素。您可以使用下面的属性来为 HTML 元素设置外边距：

  • margin-top：设置元素上方的外边距；
  • margin-bottom：设置元素下方的外边距；
  • margin-right：设置元素右侧的外边距；
  • margin-left：设置元素左侧的外边距；
  • margin：外边距的简写属性，可以同时设置元素四个方向（上下左右）的外边距。

上述外边距属性的可选值如下表所示：

值描述
auto由浏览器计算外边距的尺寸
length使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸，可以为负值，默认值为 0px
%定义基于父元素的宽度百分比的外边距，可以为负值
inherit从父元素继承外边距属性的值

【示例】使用 margin-top、margin-bottom、margin-right、margin-left 几个属性分别设置元素四个方向上的外边距：

<!DOCTYPE html><html><head><style>div.box-one {border: 1px solid red;display:inline-block;   /*将元素转换为行内元素*/}div.box-two {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 80px;margin-top: 10px;margin-right: 1em;margin-left: 1cm;}div.box-three {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid #CCC;background: #CCC;width: 180px;height: 100px;margin-top: 10px;margin-bottom: 1em;margin-right: 10px;margin-left: 1cm;}</style></head><body><div class="box-one"><div class="box-two">margin-top: 10px;<br>margin-right: 1em;<br>margin-left: 1cm;</div><div class="box-three">margin-top: 10px;<br>margin-bottom: 1em;<br>margin-right: 10px;<br>margin-left: 1cm;</div></div></body></html>

运行结果如下图所示：

margin-top、margin-bottom、margin-right、margin-left 属性演示
图：margin-top、margin-bottom、margin-right、margin-left 属性演示

这里需要特别说明一下 margin 属性，与其它几个属性不同，margin 属性可以接受 1~4 个参数（参数之间使用空格分隔）：

  • 如果提供四个参数，那么将按照上、右、下、左的顺序分别作用于元素四个方向的外边距；
  • 如果提供三个参数，那么第一个参数会作用在元素上方的外边距，第二个参数会作用在元素左右两侧的外边距，第三个参数则作用在元素下方的外边距；
  • 如果提供两个参数，那么第一个参数会作用在元素上方和下方的外边距，第二个参数会作用在元素的左右两侧的外边距；
  • 如果只提供一个参数，那么这个值将同时作用于元素上下左右四个方向的外边距。

【示例】使用 margin 属性为元素设置外边距：

<!DOCTYPE html><html><head><style>div.box-one {border: 1px solid red;display:inline-block;   /*将元素转换为行内元素*/}div.box-two {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 100px;margin: 10px 1em;}div.box-three {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid #CCC;background: #CCC;width: 150px;height: 50px;margin: 10px 0px 1ex 1em;}</style></head><body><div class="box-one"><div class="box-two">margin: 10px 1em;</div><div class="box-three">margin: 10px 0px 1ex 1em;</div></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：margin 属性演示

外边距折叠

外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并，合并为一个外边距。关于外边距折叠有以下几点需要注意：

  • margin 折叠只发生在块级元素上；
  • 浮动元素的外边距不会与任何外边距发生折叠；
  • 设置了 overflow 属性且值不为 visible 的块级元素，将不会与它的子元素发生外边距折叠；
  • 绝对定位元素的外边距不与任何外边距发生折叠；
  • 根元素（例如<body>）的外边距不与其它任何外边距发生折叠。
  1. 在相邻的两个兄弟元素之间：
  • 如果相邻两个元素外边距的值都为正数，那么两个元素的实际间距为两个外边距中较大的那个；
  • 如果相邻两个元素外边距的值都为负数，那么两个元素的实际间距为两个外边距中较小的那个；
  • 如果相邻两个元素外边距的值一个为正数、一个为负数，那么两个元素之间的实际间距为两个外边距相加的和。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：相邻兄弟元素之间的外边距折叠

  1. 在父元素与其子元素之间：（注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素）
  • 如果父元素与子元素外边距的值都为正数，那么折叠后的外边距为两个外边距中较大的那个；
  • 如果父元素与子元素外边距的值都为负数，那么折叠后的外边距为两个外边距中较小的那个；
  • 如果父元素与子元素外边距的值一个为正数、一个负数，那么折叠后的外边距为两个外边距相加的和。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：父元素与其子元素之间的外边距折叠

原文地址CSS外边距

相关文章：

CSS外边距

元素的外边距&#xff08;margin&#xff09;是围绕在元素边框以外&#xff08;不包括边框&#xff09;的空白区域&#xff0c;这片区域不受 background 属性的影响&#xff0c;始终是透明的。 为元素设置外边距 默认情况下如果不设置外边距属性&#xff0c;HTML 元素就是不会…...

编程日记 2024/9/30 18:16:37

C++ set，multiset与map，multimap的基本使用

1. 序列式容器和关联式容器 string、vector、list、deque、array、forward_list等STL容器统称为序列式容器&#xff0c;因为逻辑结构为线性序列的数据结构&#xff0c;两个位置存储的值之间一般没有紧密的关联关系&#xff0c;比如交换一下&#xff0c;他依旧是序列式容器。顺…...

编程日记 2024/9/30 18:14:35

评估潜力无限：解读自闭症患者的工作能力评估

在星贝育园这片充满爱与希望的土地上&#xff0c;我们不仅见证了无数自闭症儿童在康复训练中的点滴进步&#xff0c;更深刻理解了他们内在潜力的无限可能。自闭症&#xff0c;这一复杂的神经发育障碍&#xff0c;常常让外界对其患者的工作能力产生误解和偏见。然而&#xff0c;…...

编程日记 2024/9/30 18:13:34

js 实现视频封面截图

今天给大家分享一下&#xff0c;如何实现视频封面截取功能&#xff0c;这里主要用到了 HTML5 的 canvas 相关的 api 和 js 相关的一些知识&#xff0c;话不多说&#xff0c;直接上代码&#xff1a; <template><div><div class"margin-tb-sm"><…...

编程日记 2024/9/30 18:12:33

Hadoop FileSystem Shell 常用操作命令

提示&#xff1a;本文章只总结一下常用的哈&#xff0c;详细的命令大家可以移步官方的文档&#xff08;链接贴在下面了哈&#x1f923;&#xff09;— HDFS官方命令手册链接。 目录 1. cat 命令&#xff1a;查看 HDFS 文件内容2. put 命令&#xff1a;将本地文件上传到 HDFS3.…...

编程日记 2024/9/30 18:09:29

uniapp EChars图表

1. uniapp EChars图表 &#xff08;1&#xff09;Apache ECharts 一个基于 JavaScript 的开源可视化图表库   https://echarts.apache.org/examples/zh/index.html &#xff08;1&#xff09;官网图例 &#xff08;2&#xff09;个人实现图例 1.1. 下载echart 1.1.1. 下…...

编程日记 2024/9/30 18:08:28

最新版ingress-nginx-controller安装 使用host主机模式

最新版ingress-nginx-controller安装 使用host主机模式 文章目录 最新版ingress-nginx-controller安装 使用host主机模式单节点安装方式多节点高可用安装方式 官方参考链接&#xff1a; https://github.com/kubernetes/ingress-nginx/ https://kubernetes.github.io/ingress-ng…...

编程日记 2024/9/30 18:07:27

实习问题(配置文件获取参数)

Java中用SpringBoot框架&#xff0c;当我们要获取配置文件yml里的参数时&#xff0c;用Value注解获取 如果配置文件中没有srvSealUploadPath这个参数的话&#xff0c;可以用Value("${srvSealUploadPath:data/idoc/temp}")&#xff0c;这个的意思是&#xff0c;如果配…...

编程日记 2024/9/30 18:06:25

C#测试调用Ghostscript.NET浏览PDF文件

Ghostscript.NET是针对Ghostscript的C#封装库&#xff0c;支持解析PostScript语言、操作PDF文件等。使用Ghostscript.NET的GhostscriptViewer 模块可以以图片形式查看PDF文档。本文学习并测试调用Ghostscript.NET模块打开及浏览PDF文件的基本用法。   Ghostscript.NET目前主要…...

编程日记 2024/9/30 18:03:22

MySQL本地安装步骤

下载MySQL ZIP压缩包 访问MySQL官网&#xff08;https://www.mysql.com/&#xff09;或下载页面&#xff08;https://dev.mysql.com/downloads/mysql/&#xff09;。 在下载页面选择“MySQL Community Server”作为下载目标。 根据你的操作系统&#xff08;Windows&#xff09;…...

编程日记 2024/9/30 18:02:22

redisson使用笔记

文章目录 spring集成redisson maven配置yml配置使用redisTemplate和redisson的区别 其他项目中看到redisson&#xff0c;看样子像是redis相关类库&#xff0c;实际也确实是。 还是老规矩&#xff0c;见到的要了解&#xff0c;需要的必须掌握&#xff0c;了解一下吧。 spring集成…...

编程日记 2024/9/30 18:01:20

设计模式之享元（Flyweight）模式

前言 面向对象很好地解决了 “抽象” 的问题&#xff0c;但是不可避免的要付出一定的代价。对于通常情况来讲&#xff0c;面向对象的成本大都可以忽略不计。但是某些情况&#xff0c;面向对象所带来的成本必须谨慎处理 具体需要自己根据需求去评估 定义 “对象性能” 模式。运用…...

编程日记 2024/9/30 18:00:19

桥接（桥梁）模式

简介 桥接模式&#xff08;Bridge Pattern&#xff09;又叫作桥梁模式、接口&#xff08;Interface&#xff09;模式或柄体&#xff08;Handle and Body&#xff09;模式&#xff0c;指将抽象部分与具体实现部分分离&#xff0c;使它们都可以独立地变化&#xff0c;属于结构型…...

编程日记 2024/9/30 17:58:16

语言模型发展史

四个阶段 第一阶段&#xff1a;基于规则和统计的语言模型 由人工设计特征并使用统计方法对固定长度的文本窗口序列进行建模分析&#xff0c;这种建模方式也被称为N-gram语言模型。 优点&#xff1a; 1&#xff09;采用极大似然估计, 参数易训练 2&#xff09;完全包含了前n-…...

编程日记 2024/9/30 17:56:13

【Linux】模拟实现一个shell

接受每一个人的批评&#xff0c;可是保留你自己的判断。 ——莎士比亚 一段时间的没有更新是由于最近开学期间比较的忙&#xff0c;同时也是由于刚开学的几门课才学习的时候有点迷糊&#xff0c;需要在学校课堂上花的时间更多了&#xff0c;所以才没有更新的&#xff0c;求放过…...

编程日记 2024/9/30 17:55:12

云原生数据库 PolarDB

简介&#xff1a;云原生数据库 PolarDB 是阿里云自研产品&#xff0c;在存储计算分离架构下&#xff0c;利用了软硬件结合的优势&#xff0c;为用户提供秒级弹性、高性能、海量存储、安全可靠的数据库服务。100%兼容MySQL和PostgreSQL生态&#xff0c;支持分布式扩展&#xff0…...

编程日记 2024/9/30 17:54:11

MobaXterm基本使用 -- 服务器状态、批量操作、显示/切换中文字体、修复zsh按键失灵

监控服务器资源 参考网址&#xff1a;https://www.cnblogs.com/144823836yj/p/12126314.html 显示效果 MobaXterm提供有这项功能&#xff0c;在会话窗口底部&#xff0c;显示服务器资源使用情况 如内存、CPU、网速、磁盘使用等&#xff1a; &#xff08;完整窗口&#xff0…...

编程日记 2024/9/30 17:53:10

elastic Search 初步之向量检索的数据写入及检索查询

### Elasticsearch 向量检索实现方法方案 Elasticsearch 从 7.3 版本开始引入了向量检索功能，支持通过向量字段进行相似度搜索。以下是实现向量检索的步骤和方案，包括 Python 和 Java 版本的代码示例。 #### 1. 最低实现向量检索的 ES 版本 - **最低版本**: Elasticsearch …...

编程日记 2024/9/30 17:52:09

Tdesign TreeSelect 树形选择 多选

这里写自定义目录标题 小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据 小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据 TreeSelect 树形选择 在原demo基础上修改 const chineseNumber 一二三四五六七八九十.…...

编程日记 2024/9/30 17:49:05

Pygame中Sprite实现逃亡游戏5

在《Pygame中Sprite实现逃亡游戏4》中通过碰撞检测实现了玩家、飞龙与飞火之间的碰撞处理&#xff0c;基本上实现了逃亡功能。最后&#xff0c;实现这个逃亡游戏中文字提示的功能。 1 操作提示 当进入游戏后&#xff0c;会在玩家下方的位置给出操作提示&#xff0c;如图1所示…...

编程日记 2024/9/30 17:46:01

5个超实用网络转发技巧：用socat-windows解决90%的连接难题

5个超实用网络转发技巧&#xff1a;用socat-windows解决90%的连接难题 【免费下载链接】socat-windows unofficial windows build of socat http://www.dest-unreach.org/socat/ 项目地址: https://gitcode.com/gh_mirrors/so/socat-windows 在现代网络架构中&#xff0…...

编程新知 2026/3/29 0:39:11

ESP32低功耗项目实战：用Light Sleep和Deep Sleep保持LED亮度的完整代码与避坑指南

ESP32低功耗项目实战&#xff1a;用Light Sleep和Deep Sleep保持LED亮度的完整代码与避坑指南 在物联网设备开发中&#xff0c;电池续航往往是决定产品成败的关键因素。想象一下&#xff0c;你设计的智能门锁因为频繁更换电池而被用户抱怨&#xff0c;或者环境监测传感器因为电…...

编程新知 2026/3/29 0:03:02

电商老板必看：用Excel的IF和VLOOKUP函数，轻松算出你的新老客户利润贡献比

电商精细化运营&#xff1a;用Excel透视新老客户利润贡献的实战指南 对于中小电商企业主来说&#xff0c;理解客户结构是精细化运营的第一步。你可能没有专业的BI工具&#xff0c;但Excel这个看似普通的办公软件&#xff0c;却能帮你挖掘出惊人的商业洞察。本文将带你一步步构建…...

编程新知 2026/3/28 23:36:46

3分钟掌握AI工作流：Awesome-Dify-Workflow全功能实战指南

3分钟掌握AI工作流&#xff1a;Awesome-Dify-Workflow全功能实战指南 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Di…...

编程新知 2026/3/28 23:26:42

如何快速掌握Monaco Editor代码模板变量默认值导入的完整指南

如何快速掌握Monaco Editor代码模板变量默认值导入的完整指南 【免费下载链接】monaco-editor A browser based code editor 项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor 想要在Web应用中实现像VS Code一样强大的代码编辑器体验吗&#xff1f;Monaco Ed…...

编程新知 2026/3/28 23:26:42

AWS CloudFormation 安全最佳实践终极指南：IAM角色与策略配置完全解析

AWS CloudFormation 安全最佳实践终极指南&#xff1a;IAM角色与策略配置完全解析 【免费下载链接】aws-cloudformation-templates awslabs/aws-cloudformation-templates: 是一个包含各种 AWS CloudFormation 模板的存储库。适合查找和学习 AWS CloudFormation 模板的示例&…...

编程新知 2026/3/28 22:50:16

Nano语法高亮配置最佳实践：基于nanorc项目的经验分享

Nano语法高亮配置最佳实践&#xff1a;基于nanorc项目的经验分享 【免费下载链接】nanorc Improved Nano Syntax Highlighting Files 项目地址: https://gitcode.com/gh_mirrors/na/nanorc Nano语法高亮配置是提升命令行文本编辑体验的关键技巧。如果你经常使用Nano编辑…...

编程新知 2026/3/28 22:36:14

从MATLAB到Python：脑网络连通性分析之PLI/wPLI的跨平台实现与结果对比

从MATLAB到Python&#xff1a;脑网络连通性分析之PLI/wPLI的跨平台实现与结果对比 神经科学研究中&#xff0c;脑网络连通性分析正成为理解认知功能与疾病机制的重要工具。其中&#xff0c;相位滞后指数&#xff08;PLI&#xff09;及其加权版本&#xff08;wPLI&#xff09;因…...

编程新知 2026/3/28 21:41:54

3步突破AI工具限制：开源解决方案全解析

3步突破AI工具限制&#xff1a;开源解决方案全解析 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro. We have this limi…...

编程新知 2026/3/28 19:30:55

大疆无人机GB28181协议接入异常深度排查与系统性解决方案

大疆无人机GB28181协议接入异常深度排查与系统性解决方案 【免费下载链接】wvp-GB28181-pro 项目地址: https://gitcode.com/GitHub_Trending/wv/wvp-GB28181-pro 问题定位&#xff1a;从日志特征解析接入故障 在WVP-GB28181-Pro平台集成大疆Mavic 3E无人机过程中&…...

编程新知 2026/3/28 19:02:48