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

CSS外边距

news 2026/2/8 7:29:34

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/7 7:53:36

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/11/27 2:47:09

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2026/1/27 19:33:55