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

    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>
    

    在这里插入图片描述

    展开全文
  • css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin,一个有...

     css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin,一个有下外边距margin,这个问题变得有点复杂。我们来看看。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Margin上下边距重叠问题</title>  
    <style>  
    #one{width:200px;height:100px;background-color:#ff0000;margin:10px;}  
    #two{width:200px;height:100px;background-color:#00ff00;margin:10px;}  
    </style>  
    </head>  
    <body>  
    <div id="one"></div>  
    <div id="two"></div>  
    </body>  
    </html>   

     

     如果你认为one和two盒子的距离是20px,那你就错了,它们的真正距离是10px。

          这是css的一个特性,当空白边叠加时,以较大的margin值为准。这在html和xhtml中都是一样的情况。

          但如果把上例中的one和two盒子都进行float,那情况又不同了,如:

    <style>  
    #one{width:200px;height:100px;background-color:#ff0000;margin:10px;float:left;}  
    #two{width:200px;height:100px;background-color:#00ff00;margin:10px;float:left;clear:both;}  
    </style> 

    这时one与two盒子之间的上下距离变成了20px,这就是说当两个对象都浮动的情况下就不再遵守空白边叠加的规则了。

    转载于:https://www.cnblogs.com/lingdublog/p/6438035.html

    展开全文
  • 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

    展开全文
  • 在模仿淘宝网页的时候,遇到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他山之石可以功玉。


    展开全文
  • 在看《CSS那些事儿》遇到一个问题,在两列定宽结构中,高度为0的块级元素(即#container)的下外边距没有起作用,请问是怎么回事? 效果图和代码如下: [img=...
  • HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式; 语法格式:<style type=“text/css”></style> 提示:<style>中CSS样式,只能给当前网页来使用;...2,外联...
  • 当上下相邻的两个块元素相遇时如下图,如果上面的元素设置了下外边距margin-bottom,下面的元素设置上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被...
  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素...
  • 外边距

    2019-10-11 20:08:28
    1.外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,...由于页面中的元素都是靠左靠上摆放的,当我们设置上和左外边距时,会导致盒子自身的位置发生改变,如果设置右和下外边距会改变其他盒子...
  • 外边距(margin) margin属性用于设置外边...margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 取值顺序跟内边距相同。 外边距实现盒子居中 可以让一个盒子实现水平居中,需...
  • margin margin指外边距,是盒子模型的组成之一(盒子...三个值时,第一个值为上外边距,第二个值为左右外边距,第三个值为下外边距 四个值时,分别对应上、右、下、左四个外边距 也可以单独设置,如margin-left,mar...
  • 外边距塌陷

    2021-01-09 10:31:20
    外边距塌陷也称为外边距合并,是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距,组合在一起变成单个外边距,不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。 外边距塌陷如何解决? 问题:...
  • 块级元素的上外边距(margin-top)和下外边距(margin-bottom)有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。 发生外边距折叠...
  • CSS 外边距

    2019-10-02 10:13:10
    margin-bottom: 下外边距 属性: margin-left 值:数字 指的是元素边框和元素边框之间的距离 注:像span这样的内联元素,默认情况下,只有左右外边距,没有上下外边距。 为了观察上下外边距的效果,可以采用块...
  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素...
  • 外边距合并

    2020-03-08 18:54:58
    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom, 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素...
  • 给红色和绿色两个BOX分别设置上外边距和下外边距 .box1{ margin-bottom:100px; } .box2{ margin-top:50px; } 结果如图: 此时发现:两个box之间的实际距离是100px。 原因:浏览器在渲染相邻两个box时,如果...
  • 外边距重叠

    2019-03-08 16:14:54
    外边距重叠对象:盒子模型 什么是外边距重叠?...当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。 这种情况下,折叠后margin计算,分为三种情况: 在 m...
  • 在“标准文档流中” 通过 margin 定义块元素的垂直...当上下相邻的两个块元素都设置外边距(margin),如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是 marg...
  • 垂直外边距合并

    2020-12-14 09:55:51
    当垂直的外边距相邻时,给两个外边距设置一个下外边距和设置一个上外边距,他们会将两个外边距合并成一个外边距,这就是外边距的重叠(两个外边距取最大的那个外边距) 父子之间的外边距重叠,当一个父元素中有一...
  • margin 外边距

    2018-04-26 18:23:59
    作者:心叶时间:2018-04-26 ...margin有许多需要注意的地方,比如块级元素垂直相邻外边距会合并,行内元素实际上不占上下外边距,左右外边距也不会合并,浮动元素的外边距也不会合并。 普通元素的margin百分百是按...
  • CSS外边距合并

    2020-06-24 11:07:02
    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素垂直...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,468
精华内容 987
关键字:

下外边距