外边距 - margin

coolchaobing coolchaobing 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 800+累计阅读 873平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 2022-07-30 10:52:29 873 阅读 AI 写同款· GEO 优化 ›
Qt快速读取Excel文件 网上很多读取方式都是如下形式，太慢了，打开文件+读取文件要6s以上，实在是受不了！ QAxObject excel("Excel.Application"); excel.setProperty("Visible", false); QAxObject *work_books = excel.querySubObject("WorkBooks"); work_boo... 阅读详情

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距

margin包括四个方向

  • margin-top：上内边距;
  • margin-right：右内边距;
  • margin-bottom：下内边距;
  • margin-left：左内边距;

margin单独编写是一个缩写属性

  • margin-top、margin-right、margin-bottom、margin-left的简写属性;
  • margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

margin的其他值

在这里插入图片描述

上下margin的传递

margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
    在这里插入图片描述
    margin-bottom传递
  • 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
    在这里插入图片描述
    如何防止出现传递问题
  • 给父元素设置padding-top\padding-bottom;
  • 给父元素设置border;
  • 触发BFC: 设置overflow为auto;

建议

  • margin一般是用来设置兄弟元素之间的间距
  • padding一般是用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

水平方向上的margin（margin-left、margin-right）永远不会collapse

折叠后最终值的计算规则

  • 两个值进行比较，取较大的值;

如何防止margin collapse ?

  • 只设置其中一个元素的margin;

两个兄弟块级元素之间上下margin的折叠
在这里插入图片描述
父子块级元素之间margin的折叠
在这里插入图片描述

收录于
前端学习小记

当前文章被收录于：

前端学习小记
85 篇文章 4 人学习

codewhy的小记

订阅专栏 查看详情
标签
#前端 #html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
DSP(数字信号处理器)技术概要 数字信号处理器(digital signal processor,DSP)是一种用于数字信号处理的可编程微处理器，它的诞生与快速发展，使各种数字信号处理算送得以实时实现，为数字信号处理的研究和应用打开了新局面，提供了低成本的实际工作环境和应用平台，推动了新的理论和应用领域的发展。目前，DSP技术在通信、航空、航天。雷达、工业控制、医疗、网络及家用电器等各个领域都得到了广泛应用。 1.1 DSP系统和芯片的结构特点1.1.1 DSP系统的基本结构通过传感数将非电物理量转换为模拟电信号，预处理一般包括放大器和滤 阅读详情

相关推荐

飞塔防火墙CVE-2022-40684漏洞复现：手把手教你搭建靶场环境（附调试技巧）

本文详细指导如何搭建Fortinet飞塔防火墙CVE-2022-40684认证绕过漏洞的靶场环境，涵盖虚拟机部署、网络配置、调试模式开启及漏洞原理分析。通过手把手教程，读者可掌握漏洞复现与深度调试技巧，深入理解该认证绕过漏洞的利用与防御。

h6i7j8的博客 695

【CSS】margin 的使用

# margin 的使用 margin 用于设置元素的外边距。 margin 是一个简写属性，包括以下 4 个子属性： - margin-top：上外边距。 - margin-right：右外边距。 - margin-bottom：下外边距。 - margin-left：左外边距。 margin 可以设置 1 ~ 4 个属性值： 1. 一个属性值：一起设置上下左右。 2. 两个属性值：分别设置上下、左右。 3. 三个属性值：分别设置上、左右、下。 4. 四个

Superman_H的博客 7898

CentOS 7下Ollama+Dify+DeepSeek离线部署全攻略（附模型迁移技巧）

本文详细介绍了在CentOS 7无网环境下，从零开始离线部署Ollama、DeepSeek模型与Dify平台的完整实战攻略。内容涵盖基础环境规划、Ollama服务安装、模型文件迁移技巧、Docker引擎离线部署，以及Dify平台与本地Ollama服务的集成配置，为企业内网构建安全、可控的AI应用提供了一套经过验证的解决方案。

weixin_28826521的博客 349

margin或者padding值为4个、3个、2个、1个的时候分别是什么意思

以margin为例，padding同理 margin为4个时，margin:上  右  下  左;（为顺时针方向） margin为3个时，margin:上   左=右   下; margin为2个时，margin:上=下   左=右; margin为1个时，margin:上=右=下=左;

milklili的博客 3万+

Silly Tavern（酒馆）AI 角色扮演下载与安装教程（Windows本地部署）

SillyTavern是一款开源AI角色扮演前端工具，支持沉浸式对话和长期角色互动。本文详细介绍了在Windows系统F盘部署SillyTavern的完整流程，包括下载项目、安装Node.js和Git环境、配置路径、启动服务等关键步骤，并特别说明非系统盘路径可能遇到的npm安装问题及解决方法。成功启动后，用户可通过浏览器访问本地地址使用该工具进行AI角色扮演互动。

Tan3851的博客 1万+

【深度学习】基于BERT模型的情感分析（附实战完整代码+数据集）

情感分类是一个快速发展的研究领域，尽管众多模型和数据集在二分类任务中显示出很高的准确性，但细粒度的情感分类任务仍然是一个很大改进空间的领域。分析SST-5数据集，Munikar等人的先前工作表明，嵌入工具BERT允许使用简单的模型来实现最新的准确性。

aaaa_hsjsueu的博客 2万+

margin-right右边距失效：CSS

浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下 如果子容器的宽度能够被容纳 设置margin-right是没有用的 解决办法在元素外面再套一层div，display设置flex &-divbutton { display: flex; &-button { margin-left: 20px; margin-right: 20px; margin-top: 30px; } } ...

https://github.com/Mac-Zhu 2664

Matlab实现雷达波位编排

1 简介 %本程序用于雷达球坐标系到正弦空间坐标系的转换,以及相控阵雷达的波位编排。 2 完整代码 ​%070228添加波位数据保存clear allclose allclc%波束宽度,单位：度BeamWidth = 3.6;theta05 = round(sin(BeamWidth*pi/180)*1000)/1000;%雷达作用空域AZ = [-15 15]; %方位角范围(雷达球坐标系)，单位：度EL = [0 30]; %俯仰角范围(雷

qq_59747472的博客 2479

CSS学习——外边距

目录 目录 外边距(margin) 外边距实现盒子居中 清除元素的默认内外边距 外边距合并 相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的合并 外边距(margin) margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。 margin-top:上外边距 margin-right:右外边距 ...

WangJiaYi948的博客 913

《UDS协议从入门到精通》系列——图解0x83：访问时间参数

详细介绍UDS协议0x83服务，目标ECU的时序参数设置有哪些注意点？

车载系统攻城狮 2138

YOLO-V8训练自己的数据集之标注样本

四、标注样本 4.1、标注样本概述 4.1.1、样本标注主要方法 4.1.2、标注样本概念 4.1.3、标注样本实现方式 4.1.4、常见标注样本软件 4.2、标注工具LabelImg 4.2.1、LabelImg介绍 4.2.2、LabelImg特点 4.2.3、LabelImg安装方法 4.2.4、LabelImg使用方法 4.3、标注样本实操 4.3.1、安装标注软件Labelimg 4.3.2、Labelimg界面介绍 4.3.3、LabelImg实操过程中常

qq_29633789的博客 663

CSS———外边距（margin）、内边距（padding）

CSS———外边距（margin） 和浮动（float）margin(外边距)margin的作用margin的使用padding（内边距）padding的作用padding的使用 margin(外边距) margin的作用 margin 清除周围的（外边框）元素区域。 margin 没有背景颜色，是完全透明的。 margin可以用于元素之间的布局。 margin的使用 margin: 上边距...

班的博客 1350

同步调相机启动与并网控制技术方案

同步调相机起动与并网控制技术方案采用背靠背变流器系统，通过静止变频器（SFC）策略实现无原动机驱动的同步电机从静止到同步转速的平稳起动。方案详细阐述了硬件自检、模块初始化、转子位置检测等关键环节，重点解决启动转矩为零、冲击电流大等挑战。系统基于STM32或C2000系列控制器，包含网侧/机侧变流器、检测保护单元及通信接口，通过励磁脉冲和电压响应分析实现高精度转子初始定位，为后续并网提供必要条件。代码级实现涵盖了ADC自检、数字IO验证及通信端口测试等核心功能。

huanghm88的专栏 306

CSS 外边距（margin）

外边距（margin） margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。 margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 取值顺序跟内边距相同。 外边距实现盒子居中 可以让一个盒子实现水平居中，需要满...

林彬的专栏 1876

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)

文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...

IT_Helianthus的博客 9443

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

CSS margin(外边距)

CSS 的margin属性是用来定义元素与其周围元素之间的空间，即外边距。外边距是透明的，不会影响元素的背景颜色或边框。根据 MDN Web Docs 和 W3School 的解释，margin是 CSS 中的一个简写属性，用于设置元素的上、右、下、左四个方向的外边距。它是盒子模型的一部分，位于元素的边框（border）之外，用于与其他元素保持距离。外边距是完全透明的，没有背景颜色，研究表明它主要用于调整元素之间的间距，增强页面布局的灵活性。

likuoelie的博客 906

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

CSS中div的外边距margin

---------------------------------------------CSS中div的外边距margin----------------------------------------- 代码示例：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&...

李昆鹏的博客 8382

外边距(margin)

外边距(margin) margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。 margin-top： 上外边距 margin-right: 右外边距 margin-buttom: 下外边距 margin-left: 左外边距 margin: 上外边距 右外边距 下外边距 左外边距 外边距实现盒子居中 可以让一个盒子实现水平居中，需要满足两个条件： 1...

Liyunhao_haoge的博客 7218

在html中设置外边距,CSS外边距设置属性margin用法

本文向大家描述一下CSS外边距属性margin的用法，设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值，相信本文介绍一定会让你有所收获。CSS外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。CSS margin属性设置外边距的最简...

weixin_33364098的博客 3035

margin-外边距

**外边距：**围绕在元素边框的空白区域 margin 可以设置为 auto。更常见的做法是为外边距设置长度值。 h1 {margin : 5px} 设置4个边的外边距 ： h1 {margin : 10px 0px 15px 5px;} margin 的属性： margin-top 设置元素的上外边距。 margin-right 设置元素的右外边距。 margin-botto...

weixin_46174967的博客 159

css margin为什么重叠,CSS 外边距(margin)重叠及防止方法

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况：1、...

weixin_32566515的博客 2703

【CSS入门】第二课 - margin外边距

这一小节，我们说一下margin外边距。怎么理解这个外边距呢，比如小张和小丽站在一起，紧紧排着站。试想一下，如果他俩冬天都穿着羽绒服和夏天穿着短袖，是不是占据的空间会不一样呢。那么回到HTML网页开发商来说，如果两个元素，他们加一些外边距，占的空间也会不一样，而且会使两个元素的距离也变的不一样。下面我们来看一下外边距的知识。

xingyu_qie的专栏 1897

php margin参数,css margin外边距属性与用法总结

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em、百分数值甚至负值。下面本文就来具体的谈谈外边距 margin 属性和使用，外边距的重叠和叠加，以及 margin 为负值的作用等内容。一、CSS的margin属性介绍margin 的默认值是 0，所以如果...

weixin_30572707的博客 338

CSS Margin(外边距)

in可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。 可能的值 值 说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin（使用像素，pt，em等） % 定义一个使用百分比的边距 Margin可以使用负值，重叠的内容。 Margin - 单边外边距属性 在CSS中，它可以指定不同的侧面不同的边距： <!DOCTYPE html> <html>

1万+

CSS-margin外边距

margin外边距(说明影响位置，margin-top、margin-right、margin-bottom、margin-left属性，负值，简写)

主营前端方向，技术栈是vue 434

4、CSS 外边距margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。 CSS 外边距属性 属性 描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 1、CSS marg

you can you up up up的博客 1084
上一篇： 圆角 – border-radius
下一篇： 外轮廓 - outline
点赞 0
评论 0
书签 书签 0
coolchaobing
coolchaobing
博客等级 码龄9年 12粉丝 105原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值