CSS margin的含义

最新推荐文章于 2024-10-09 19:18:32 发布
最新推荐文章于 2024-10-09 19:18:32 发布
阅读量2.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： web 文章标签： css blog 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/matianjun002/article/details/1519985
本文详细解释了CSS中margin属性的概念及应用。介绍了margin作为元素边距的意义，并通过实例说明了其在网页布局中的作用，帮助读者理解如何利用margin来精确控制元素的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

margin为边距的意思，然而边距是要有参照物的，也就是谁的边距谁多远，可以用下面的图简明的表示出来：

回

 哈哈，上面是一个字啊，没办法，优快云 blog画不了图也贴不了图，只能用“回字”表示了，就是两个矩形，外面大矩形套里面小矩形，假设两个矩形分别叫A和B，A包含B

B的margin就是B的四条边到A的四条边的距离，也就是有四个margin：margin-top，margin-right，margin-bottom，margin-left，在CSS中就是这样命名的，而且如果只用margin代替这四个，顺序就按照我写的这个顺序，上－右－下－左，顺时针方向

已经知道了margin的四种类型和含义，但是为什么必须是要有包含关系呢？

其实页面文档是由许多容器组成的，<body></body>是一个容器，<table></table>也是一个容器，等等。只要是封闭的标签都可以看作容器，这就很好的说明了margin：即一个容器的边距包含它的容器的边的距离，这样就很好的定位了它的位置，整个页面的显示也就有数据可依了，也就有条不紊了。

CSS文件中margin的含义和用法
TechChamp的博客
10-04 1340
需要注意的是，margin属性也可以应用于不同类型的盒子模型（如块级元素和内联元素），并且可以与其他CSS属性（如宽度、高度和浮动）一起使用。这意味着元素的上方边距为10像素，右侧边距为20像素，下方边距为15像素，左侧边距为5像素。上述代码将为具有class为"margin"的元素设置10像素的统一外边距。margin属性用于设置元素的外边距，它可以接受一到四个值，分别控制元素的上、右、下和左边距。上述代码将为具有class为"margin"的元素设置-10像素的外边距。上述代码与前面的示例效果相同。
css重点2：padding margin的使用
小黄呀呀呀的博客
04-27 196
1、padding和margin 以上图为例（实现上述图的2种方式，分别以padding 和margin来实现）： 思路： （1）如果想要padding实现，首先要知道padding的意思，Padding是内边距的意思，也就是内容物距离我这个盒子的距离，里面的内容物是G，所以设置R的内边距是20px; （2）如果想要margin实现，首先要知道margin的意思，margin是外边距的意思，也就...
CSS中margin属性详解
热门推荐
qq_40208605的博客
06-15 3万+
margin属性概述margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性.该接受任何长度单位，可以是像素、英寸、毫米或 em。相关属性margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-...
负margin在布局中的运用（*****************************************************************）...
weixin_34242331的博客
11-21 523
一、左右栏宽度固定，中间栏宽度自适应 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;左右栏宽度固定，中间栏宽度自适应&lt;/title&gt; &lt;style&gt;
CSS基础中margin详解
最新发布
ning的博客
10-09 1835
外边距（margin）是元素内容（content）和边框（border）之间的空间，它是透明的，可以用来增加元素之间的间距。margin属性可以设置为正值、负值、百分比或auto。margin属性是CSS中一个非常重要的工具，它可以帮助我们控制元素之间的间距，实现更美观的布局。通过设置不同的值，我们可以实现各种布局效果，如水平居中、垂直间距控制、响应式布局等。同时，了解margin合并现象和负值的使用，可以帮助我们更好地控制元素的位置和间距。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。
css margin
soos的博客
11-16 299
margin垂直方向塌陷问题： &lt;div class="wrapper"&gt; &lt;div class="content"&gt;&lt;/div&gt; &lt;/div&gt;   解决方法： 1、在父元素的css样式加一个border-top。 2、在父级元素设置：       第一种：position:absolute;       第二种：displa...
css margin:0 auto居中
09-25
首先，`margin: 0 auto` 的含义是将元素的上、下外边距设置为0，而左右外边距自动分配，以使元素在父容器内居中。这只有在元素的宽度被指定（例如，通过`width`属性）时才有效，因为浏览器需要知道元素的宽度来计算...
CSS margin属性详解：基础与实战应用
4. 省略值写法：margin的省略值写法根据给出的值数量不同有不同的含义： - 一个值：所有方向的margin同为该值，如`margin: 10px`。 - 两个值：第一个值为上下margin，第二个值为左右margin，如`margin: 10px 20px`...
css属性列表_和_属性值含义
09-17
CSS 属性列表和属性值含义 CSS 属性列表和属性值含义是指在 CSS 样式表中使用的各种属性和它们的可能取值。了解这些属性和它们的含义是掌握 CSS 样式表编写的关键。 媒体类型(Media) CSS 样式表可以作用于多种...
CSS 学习 -- margin
qq_45050686的博客
07-11 1704
margin
CSS Margin(外边距)
weixin_30393907的博客
06-06 121
CSS Margin(外边距)属性定义元素周围的空间。 Margin margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。 可能的值 值说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin（使用像素...
CSS 外边距：Margin
梁辰兴的博客
09-19 1484
当有三个值时，第一个值应用于上边距，第二个值应用于左右边距，第三个值应用于下边距。在CSS中，外边距（Margin）属性可以用来控制元素周围的空间，它是一种单边外边距属性，也就是说，它可以单独改变元素的上，下，左，右边距。会将上边距设置为10像素，右边距设置为20像素，下边距设置为30像素，左边距设置为40像素。代表上边距为25px，右边距为50px，下边距为75px，左边距为100px。代表上边距为25px，右边距为50px，下边距为75px，左边距为100px。，来对上、右、下、左的外边距进行设置。
CSS 关于margin你应该要知道的
qq_43293207的博客
04-04 2620
1.margin与元素尺寸 我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸 示例： <div class="container"> <div class="child"></div&g
【 CSS 外边距属性 ( Margin )】
Hey_Coder
12-05 2671
⑴ **设置 元素的外边距**: `margin` - 属性设置 元素的所有四个边外部的 外边距区域。 - ① **简写属性**: 在一个声明中，一次性设置 所有外边距属性,是以下子属性的简写。 - (子属性 和 初始值都为 `0`) - ❶ **上外边距**: `margin-top: 0` - ❷ **右外边距**: `margin-right: 0` - ❸ **下外边距**: `margin-bottom: 0` - ❹
css篇——margin
u010556394的专栏
02-01 1466
最近比较浮躁，需要沉淀一下。貌似还没认真写一篇博客，都是作为备忘录用，年末正好有点时间，借这个时间来整理整理。内容网上都有，做个记录和梳理。 margin是什么 margin，外边距，即模块与模块之间的距离。分两种： 一种父元素与子元素（或者可以说元素和它的内容）： 此时这个的M就是父元素和子元素之间的margin距离。但是，这种情况下如果父元素没有写border或者padding属性
css中的margin
u011337574的专栏
06-01 438
css中margin的设置
CSS 之 margin
Happy Simon
12-29 377
今天跟大家分享下CSS 之 margin的知识。 前言 当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。 CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个...
css 之 margin
小白向前冲！
02-03 604
【1】 margin 与 容器尺寸  元素尺寸分为： 可视尺寸 （clientWidth） 与  占据尺寸（outerWidth）（1）margin 与可视尺寸适用于没有设定 width / height 的普通block水平元素，且只适用于水平方向的尺寸（2）margin 与占据尺寸使用于块级、内联元素，与有没有设定 width / height 无关，水平和垂直方向上都适应【2】 margin...
CSS margin 与 padding法含义
chinaycheng的专栏
09-18 831
margin和padding用法理解和实例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值