首页 > 其他分享 >玛珍,玛珍,margin!

玛珍,玛珍,margin!

时间:2024-01-21 21:00:48浏览次数:34  
标签:50px 元素 距为 25px margin 玛珍 200px

最近在整理巩固面试相关的资料,又看到了熟悉的老朋友:margin,当时觉得其读起来很亲切,现在又发现很多遗忘的知识点。

了解margin

margin,译为“外边缘”,在CSS作为属性定义元素周围的空间,从以下盒模型中能更好的理解margin。

img

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;
    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px

margin负值

  • margin-top、left负值:元素向上、向左移动
  • margin-right负值:右侧元素左移,自身不收影响;当右边无元素,其实就是缩小自身宽度。
  • margin-bottom负值:下方元素上移,自身不受影响

margin塌陷

margin塌陷(又称margin重叠)指文档流内,块级元素与块级元素垂直方向上的 margin 合并(塌陷)为单个 margin,且只发生在垂直方向。行内元素不存在margin 塌陷,因为行内元素不占有外边距,同样道理float元素也不存在margin合并。

总结为:

  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 空白内容的标签也会重叠

解决方案:

1.BFC块级格式化上下文,创建隔离的容器

<body>
    <style>
        .aa {
            display: flex;
            flex-direction: column;
            width: 300px;
        }
        .bb {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            margin-top: 10px;
        }
    </style>
    <div class="aa">
        <div class="bb" style="margin-bottom: 10px;"></div>
        <div class="bb" style="margin-top: 10px;"></div>
    </div>
</body>

2.子元素浮动定位,父元素清除浮动

<body>
    <style>
        .aa {
            border: 1px solid red;
        }
        .bb {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
        }
        .clearfix:after {
			content:'';
   			display: table;
    		clear:both;
		}
    </style>
    <div class="aa clearfix">
        <div class="bb" style="margin-bottom: 10px;"></div>
        <div class="bb" style="margin-top: 10px;float:left;"></div>
    </div>
</body>

3.修改代码,添加空div,设置为flex布局

<body>
    <style>
        .aa {
            border: 1px solid red;
        }
        .bb {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
        }
    </style>
    <div class="aa">
        <div class="bb" style="margin-bottom: 10px;"></div>
        <div style="display: flex;"></div>
        <div class="bb" style="margin-top: 10px;"></div>
    </div>
</body>

更多参考:https://blog.csdn.net/Celester_best/article/details/127455732

标签:50px,元素,距为,25px,margin,玛珍,200px
From: https://www.cnblogs.com/gfhcg/p/17978362

相关文章

  • margin上边距下边距覆盖
    margin上边距下边距覆盖首先,我们知道水平间距不会重合覆盖但是,两个或多个块级盒子的垂直相邻边界会重合。边界宽度结果的如下:如果都是正值:相邻边界宽度中最大的值。如果有一个负值:在最大的正边界中减去绝对值最大的负边界。如果都是负值:从零中减去绝对值最大的负边界。......
  • CSS设置margin-top失效及解决办法
    在web网站开发中,有时候我们给html元素设置的margin-top或margin-bottom属性,但是无效,并没有取到任何作用,这是什么原因呢?常出现两种情况:1、兄弟元素之间margin-top失效先看下面代码:<div><divclass="box1">float:left</div><divclass="box2">clear:both;margin-top:20......
  • margin-top不生效原因
    当两个垂直相邻的元素都具有margin时,它们的垂直边距会发生合并,即取其中较大的一个作为最终的边距值。但是,如果其中一个元素具有边框(border)、填充(padding)或内联内容(例如文字),那么它的边距将不会与相邻元素的边距合并。.container{width:100vw;height:100vh;background-co......
  • margin穿透/传递/合并/折叠 多层 爷孙
    https://codepen.io/rhdom/pen/vYbarpm如这个代码所示<divclass="show"> <div>  <h2>crystal</h2> </div></div> <divdata-v-3151e59a=""class="form-widget-list"> <divdata-v-6f598f02=&......
  • 11月10日css盒子模型的margin和padding属性
    目录css盒子模型margin属性如何用margin来控制其上下左右的距离margin的缩写padding属性首先它如何进行上右下左的移动现在我有一个需求就是将内容在边框的正中央显示然后就是简写的方式css盒子模型有四个属性属性描述margin用于控制元素与元素之间的距离;margin的最......
  • [学习笔记] 浏览器F12检查中应该如何判断margin的上下左右?
    如下图所示,margin上下左右四个方向分别是1px,2px,3px,4px。 而在浏览器F12检查时,margin显示如下图所示:即浏览器检查时显示的margin值,是按照上、右、下、左的顺序来的。该规律在padding也同样适用。 ......
  • Bootstrap padding&margin样式
    Bootstrap中使用以下样式的类名,指定元素的padding和margin样式:{property}{sides}-{size}其中property的值为:-m:用于设置margin样式;-p:用于设置padding样式;其中sides值指定样式适用的边,可选值为:-t:设置margin-top或padding-top;......
  • 正确的使用margin:0 auto与body{text-align:center;}实现元素居中
    我们首先了解一下它们的基本概念:text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置,如:ExampleSourceCodediv{text-align:left;}表示文本居左对齐。margin是设置对象四边的外延边距,被称为外补丁或外边......
  • 关于 SAP UI5 预定义的 CSS Margin class
    与padding不同,margin是透明的,不是控件可单击区域的一部分,并且它们与相邻边距折叠在一起,这意味着它们不会相互添加。例如,有两个相邻的32像素margin,则结果是仅显示一个32像素边距,而不是64像素的空间。SAPUI5中预定义的所有边距都支持从右到左(RTL)语言:当向左侧添加边......
  • 什么是 HTML 编程里页面元素的 margin 属性
    在前端开发中,margin是一种重要的CSS属性,用于控制元素之间的空间和距离。它不仅影响元素的外观,还可以影响整个页面的布局。本文将详细解释margin的概念、用途以及通过示例演示如何在HTML中使用margin来控制元素之间的间距。概念margin是CSS(层叠样式表)中的一个属性,用于控制元素的......