精华内容
下载资源
问答
  • 上下外边距合并

    2020-06-10 11:10:58
    所以设置时,尽量设置一个,避免上下外边距合并的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .top,...

    当两个容器,一个有margin-top 一个含有margin-bottom时,两者之间的距离为,两者之间的最大值,而非两者之和。所以设置时,尽量设置一个,避免上下外边距合并的问题。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.top,
    		.bottom {
    			width: 200px;
    			height: 200px;
    			background-color: pink;
    		}
    		.top {
    			margin-bottom: 100px;
    		}
    		.bottom {
    			background-color: purple;
    			margin-top: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="top"></div>
    	<div class="bottom"></div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em、百分数值甚至负值。下面...

    5268f80b9b1e01f982625ef6fac83ca1.png

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

    一、CSS的margin属性介绍

    1.详解CSS的margin属性使用

    b32e37e9f51394a22f021ca2e9ee193a.png

    margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

    2. 详解css的外边距margin的使用

    10e66ccf92a990b95bb8d366597849a4.png

    检索或设置对象四边的外延边距。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上、下,第二个用于左、右。如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。外延边距始终透明。

    3. CSS重要属性之 margin 属性知识大合集介绍

    1)margin 属性的简单介绍

    2)margin 无法适用的元素

    3)外边距折叠 (Collapsing margins)

    4)Collapsing margins 解决方法

    二、margin 外边距重叠或者叠加问题

    1. CSS中margin边界叠加问题的解决方法介绍(图文)

    0ce77006a713c70a4cf7abe3f8f37a4f.png

    边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

    2. CSS外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

    两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

    三、margin 为负值的作用

    1. 简单谈谈margin负值的作用

    我们在CSS中都会使用margin,但将margin设置成负数,那可能就不大好处理了,margin负值并非hack,margin负值遵循文档流;假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移;margin负值能良好兼容各浏览器。

    2. CSS中使用负margin值来调整居中位置

    d3dd7ef9db79aaa12be8a4a2d3523ee3.png

    这或许是最常用的居中方法。如果知道了各个元素的大小,设置等于宽高一半大小的负margin值(如果没有使用box-sizing: border-box样式,还需要加上padding值),再配合top: 50%; left: 50%;样式就会使块元素居中。

    有关CSSmargin的相关问答

    1. 前端 - margin的问题,那个老哥帮我解释下

    2. 前端 - CSS 三列等高布局的疑问 margin负补偿

    3. css - margin 负值为什么要这样设计?

    【相关推荐】

    1. CSS居中:最全面的CSS居中方法大全

    2. DIV居中:最全的p居中方法总结

    3. css图片居中:css图片上下左右居中(水平和垂直居中)

    展开全文
  • 在模仿淘宝网页的时候,遇到h3标签在容器顶部时设置外边距与大容器的外边距重合。

    在模仿淘宝网页的时候,遇到h3标签在容器顶部时设置外边距与大容器的外边距重合。情况如下

    <div class="w bgwh">
    	 <div class="belt">
    	      <h3 class="belth fl"><a href="#" class="lh24"><img src="img/beltT.png"></a></h3>
    	      <a href="#" class=""></a>
    	 </div>
    </div>

    (1)在网上搜索得出答案是把h3样式中添加display:inline的样式,然后悲剧了,发现无法设置行高。仔细观察淘宝发现其有设置了float:left;此时h3外边距能用了,并且宽度也能用了。

    (2)不用设置行高,只需要在h3的容器中的样式中添加overflow: hidden; zoom:1;就可以设置宽度。并且belt的外边距与大容器bgwh的外边距不重合。

    此问题属于高度塌陷问题详细的解决方法可以参考http://blog.csdn.net/qq_29104999/article/details/53504338他山之石可以功玉。


    展开全文
  • html 文档中的段落p标签一个上下外边距 转载于:https://www.cnblogs.com/mabelstyle/archive/2012/11/21/2780560.html

    html 文档中的段落p标签一个上下外边距

    转载于:https://www.cnblogs.com/mabelstyle/archive/2012/11/21/2780560.html

    展开全文
  • 外边距分开(叠加)是一个相称...当一个元素呈当时另外一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会孕育发生归并。请看图:亲身试一试当一个元素包孕在另一个元素中时(假定没有内边距或边框把外边...
  • CSS 外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这...margin-bottom 设置元素的下外边距。margin-left 设置元素的左外边距...
  • 外边距合并外边距合并(叠加)是一个...当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看图:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开...
  • 当上下相邻的两个块元素相遇时如图,如果上面的元素设置了下外边距margin-bottom,下面的元素设置上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被...
  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素...
  • margin margin指外边距,是盒子模型的组成之一(盒子...三个值时,第一个值为上外边距,第二个值为左右外边距,第三个值为下外边距 四个值时,分别对应上、右、、左四个外边距 也可以单独设置,如margin-left,mar...
  • 外边距

    2019-10-11 20:08:28
    1.外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,...由于页面中的元素都是靠左靠上摆放的,当我们设置上和左外边距时,会导致盒子自身的位置发生改变,如果设置右和下外边距会改变其他盒子...
  • 网页是由多个盒子排列而成的,要想拉开盒子与盒子之间的距离,合理地布局网页,就需要为盒子设置外边距。所谓外边距指的是标签边框与相邻标签之间的距离。...margin-bottom:下外边距;margin-left:左外边距;...
  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素...
  • 由上图可以看到我想要的效果是你好在box2中离上边距为10px,可整个box2都向移动了10px,这种现象就称为外边距塌陷(也叫外边距合并) 解决方法 1.对父元素设置overflow:hidden;(万能方法!) 完美解决当前问题 2....
  • 外边距重叠

    2019-03-08 16:14:54
    外边距重叠对象:盒子模型 什么是外边距重叠?...当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。 这种情况,折叠后margin计算,分为三种情况: 在 m...
  • 第一种:两个块级元素的上下边距折叠第二种:父元素和子元素(或者最后一个元素)的外边距第三种:空的块级元素的上下外边距折叠的根本原因:margin之间直接接触,没有阻隔折叠后外边距的计算:1.如果两个外边距都是...
  • 外边距(margin) margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这...margin:上外边距外边距 下外边距 左外边 取值顺序跟内边距相同。 外边距实现盒子居中 可以让一个盒子实现水平居中,需...
  • CSS 外边距

    2019-10-02 10:13:10
    元素外边距 指的是元素边框和元素边框之间的距离 属性: margin-left: 左外边距 ...注:像span这样的内联元素,默认情况,只有左右外边距,没有上下外边距。 为了观察上下外边距的效果,可以采用块...
  • 外边距合并

    2020-03-08 18:54:58
    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom, 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素...
  • 在学习css的时候,会css外边距这一概念,所以,css外边距是什么呢?边框以外就是外边距外边距默认是透明的,因此不会遮挡其后的任何元素,接下来本篇文章将来给大家介绍关于css外边距属性的相关内容。首先我们应该...
  • 外边距(margin)

    千次阅读 2019-10-04 23:45:09
    外边距(margin) margin属性用于设置外边距。设置外边距会在元素之间创建“空白”,这段空白...margin: 上外边距外边距 下外边距外边距 外边距实现盒子居中 可以让一个盒子实现水平居中,需要满足两个条件: 1...
  • 给红色和绿色两个BOX分别设置上外边距下外边距 .box1{ margin-bottom:100px; } .box2{ margin-top:50px; } 结果如图: 此时发现:两个box之间的实际距离是100px。 原因:浏览器在渲染相邻两个box时,如果...
  • CSS外边距合并

    2018-06-08 19:27:18
    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。...1、相邻元素 2、父子关系元素当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并...
  • 小鸡炖蘑菇炖小鸡你好:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并外边距合并(叠加)是一个相当简单的概念。但是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,540
精华内容 24,616
关键字:

下外边距