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

CSS外边距

news 文章来源：https://blog.csdn.net/2401_82561004/article/details/142659129 2024/11/19 12:44:19

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

等保2.0数据库测评之达梦数据库测评

一、达梦数据库介绍 达梦数据库管理系统属于新一代大型通用关系型数据库&#xff0c;全面支持 ANSI SQL 标准和主流编程语言接口/开发框架。行列融合存储技术&#xff0c;在兼顾 OLAP 和 OLTP 的同时&#xff0c;满足 HTAP 混合应用场景。 本次安装环境为Windows10专业版操作…...

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

集成mcuboot后测试和验证的方法

本文介绍一些在实际项目中集成的 MCUboot后测试和验证的方法和步骤&#xff1a; 功能测试 启动测试 正常启动验证 &#xff1a; 多次上电启动设备&#xff0c;观察 MCUboot 是否能够正常加载并跳转到应用程序。检查启动过程中的日志输出&#xff08;如果有&#xff09;&#…...

编程日记 2024/9/30 17:43:57

Vulhub zico 2靶机详解

项目地址 https://download.vulnhub.com/zico/zico2.ova实验过程 将下载好的靶机导入到VMware中&#xff0c;设置网络模式为NAT模式&#xff0c;然后开启靶机虚拟机 使用nmap进行主机发现&#xff0c;获取靶机IP地址 nmap 192.168.47.1-254根据对比可知Zico 2的一个ip地址为…...

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

宠物医院微信小程序源码

文章目录 前言研究背景研究内容一、主要技术&#xff1f;二、项目内容1.整体介绍&#xff08;示范&#xff09;2.系统分析3.数据表信息4.运行截图5.部分代码介绍 总结 前言 随着当代社会科技的迅速发展&#xff0c;计算机网络时代正式拉来帷幕&#xff0c;它颠覆性的影响着社会…...

编程日记 2024/9/30 17:37:45

[教程]Crystal源码下载及编译

描述&#xff1a; 随着 Crystal Source 代码的更新&#xff0c;用于构建源代码和编译它们的指南已经过时&#xff0c;这导致了很多混淆和寻求帮助。 本指南将是一个完整的分步指南&#xff0c;从下载 Visual Studio 到启动到您的服务器。 此外&#xff0c;请确保下载此存储库中…...

编程日记 2024/9/30 17:36:44

【Android 14源码分析】WMS-窗口显示-流程概览与应用端流程分析

忽然有一天&#xff0c;我想要做一件事&#xff1a;去代码中去验证那些曾经被“灌输”的理论。                                                                                  – 服装…...

编程日记 2024/9/30 17:32:39

双指针---（部分地更新）

双指针 复写零 给你一个长度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写一遍&#xff0c;并将其余的元素向右平移。 注意&#xff1a;请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改&#xff0c;不要从函数返回任何东西。 …...

编程日记 2024/9/30 17:31:38

【Windows】自定义显示器的分辨率

背景 由于本人更新驱动导致2个显示器里面&#xff0c;有一个显示器的分辨率只剩下2个可以调节 这样就导致2个显示器分辨率不同&#xff0c;更新了多次驱动都修复不了&#xff0c;所以想着看能不能自定义分辨率 工具下载 显示器自定义分辨率工具 或者百度搜索 Custom Resolu…...

编程日记 2024/9/30 17:30:37

组播基础-2-IGMP协议

文章目录 IGMPIGMPv1IGMPv2IGMPv3IGMP总结IGMP Snooping IGMP 运行于主机和路由器之间 因特网组管理协议&#xff0c;TCP/IP 协议族中负责 IP 组播成员管理的协议&#xff0c;用来在接收者与其他直接相邻的组播路由器之间建立、维护组播组成员关系 负责组播成员管理&#xf…...

编程日记 2024/9/30 17:29:35

基于Springboot+Vue的视频点播系统设计与实现登录 （含源码数据库）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统中…...

编程日记 2024/9/30 17:27:33

简网 互联 专业wordpress主机/媒体公关

C语言 _ 编辑、调试工具一、GCC编译器1、GNU工具2、GCC简介3、GCC编译器的版本4、gcc所支持后缀名解释5、编译器的主要组件6、GCC的基本用法和选项7、GCC的错误类型及对策8、**GCC编译过程**条件编译二、GDB调试工具1、Gdb调试流程&#xff1a;2、进入代码调试模式后一、GCC编译…...

编程日记 2024/11/19 9:10:14

企业网站建设与推广范文/广州seo排名外包

关于月亮的十大未解之谜至今仍然无法解开&#xff0c;月亮未解之谜是人类科学的一大探索&#xff0c;古往今来&#xff0c;为了探索月亮的奥秘&#xff0c;人类付出了巨大的努力。月亮的十大未解之谜你都有了解过吗&#xff1f;今天小编给大家准备了月亮的十大未解之谜。Ten qu…...

编程日记 2024/11/19 8:35:37

网站seo做点提升流量/做运营的具体做什么

Editor数据保存需求 做编辑器插件开发时&#xff0c;当打开一个窗口&#xff0c;对数值进行修改后&#xff0c;在关闭窗口或重新打开Unity时&#xff0c;希望能保存上次的数据。 相关知识 Serialization &#xff0c;ScriptableObject NGUI保存数据的方法 查看了下NGUI是把数据…...

编程日记 2024/11/19 7:15:56

钟星建设集团网站/百度关键词排名靠前

一 般情况下,DBA能从监控mysql的状态列表中查看出数据库的运行端倪&#xff0c;需要注意的是STATUS所表示的不同内容。且需要注意的是TIME字段表示的 意思。它表示的只是最后那个STAT状态持续的时间。这个时间是有可能忽大忽小的。而不是SQL开始执行到现在的时间。单位时间是秒…...

编程日记 2024/11/19 2:49:54

学生做兼职的网站/宝塔建站系统

这几日&#xff0c;看了一些博客。发现在一些博客的底部添加了一些版权信息&#xff0c;很新颖。如下图&#xff1a; 写信给博客园的客服&#xff0c;问如何做出来的。回复是添加自己的“签名”。无语了&#xff0c;只能自己研究了。 在分析了别人的页面后&#xff0c;终于摸索…...

编程日记 2024/11/19 2:02:43

网站设计创意/百度快照收录入口

百度BBS收录协议-生成器无论对于普通网民还是搜索引擎&#xff0c;论坛中的信息无疑是一块最重要&#xff0c;甚至最大的信息来源。 然而由于论坛数据交互性极强&#xff0c;导致论坛的链接也比较多样。多样性的链接结构和不断更新的帖子内容对搜索引擎来说一直很头疼。这也就是…...

编程日记 2024/11/19 0:50:12