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

CSS外边距

news 2025/9/14 17:46:35

元素的外边距（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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/8/5 5:52:21

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/9/6 20:28:13

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/9/3 1:27:59

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/8/11 11:25:20

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/8/25 20:08:49

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/9/9 22:50:58

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/9/2 18:41:56

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/7/6 1:12:52