Margin叠加问题

最新推荐文章于 2023-02-05 16:03:14 发布
最新推荐文章于 2023-02-05 16:03:14 发布
阅读量221 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq605053977/article/details/61425953
版权

第一种情况：

A下为20  B上位20   结果两者相距20

A下为30   B上为20   结果两者相距30


第二种情况：如A与B中有一个设置了float

则会叠加


第三种情况：左右margin加倍为题（ie6独有）

解决办法：增加一个css属性即：display：inline  

枫叶科技521124
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何解决外边距margin叠加的问题探讨
09-22
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助
关于margin叠加问题
weixin_44532043的博客
03-11 374
关于margin叠加问题 margin叠加是我们写界面经常遇见的问题 什么是margin叠加呢? 比如两个div互相嵌套,当然是两个正常文档流的div,也就是说没有加float,position的, 父元素在没有padding,border时,子元素的垂直margin回叠加给父元素. 就像下面这样,我明明是给子元素加的margin-top:50px;但是父元素也被带下去了; 先目前我了解到的解决...
margin叠加原理以及边界条件浅谈
tianyazjq的专栏
05-08 170
  边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 　　当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：   元素的顶边界与前面元素的底边界发生叠加 　　当一个元素包含在另一个元素中时（假设...
margin重叠问题
Mm_Dxx的博客
01-02 298
假设父div里面有一个子div，给子div添加margin: 100px <meta charset="UTF-8"> <title>margin</title> <style> .father { width: 300px; height: 300px; background-color: blue; .son { ...
CSS的margin重叠问题
八百里风沙，一骑独过
01-18 640
1，在底层上的两个div： 图1-1 图1-2 测试代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type"
CSS中margin边界叠加问题及解决方案
09-24
本文主要介绍了CSS中margin边界叠加问题及解决方案。具有很好的参考价值。下面跟着小编一起来看下吧
浅谈css margin重叠
12-13
父子元素margin重叠 解决办法： 给子元素添加浮动属性，相应父元素添加必要的清浮动属性； 给父元素添加边缘属性，如padding、border； 同级元素margin反向重叠 同级元素margin反向重叠时，元素之间的距离为两个...
Android编程实现图片背景渐变切换与图层叠加效果
01-20
本文实例讲述了Android编程实现图片背景渐变切换与图层叠加效果。分享给大家供大家参考，具体如下： 本例要实现的目的： 1.图片背景渐变的切换，例如渐变的从红色切换成绿色。 2.代码中进行图层叠加，即把多个...
css中margin边界叠加问题及解决方案
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
02-21 759
当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 1、水平边距永远不会重合。  2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：  a、全部都为正值，取最大者；  b、不全是正值，则都取绝对值，然后用正值减去最大值；  c、没有正值，则都取绝对值，然后用0减去最大值。  解决办法： 1.外...
css 左右Margin加倍的问题
热爱生活的专栏
12-30 743
当div层为float时，IE6中box左右的margin会加倍比如：Untitled Document.outer {  width:500px;  height:200px;  background:#000;}.inner {  float:left;  width:200px;  height:100px;  margin:5px;  background:#fff;}左面的inner的左
margin叠加问题及解决办法
MisTTT的博客
09-01 1383
css外边距（margin）重叠问题两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠； 外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。 同理，如果一个无内容的空元素，其自身上下边距也会产生重叠。防止外边距重叠解决方案 外层元素padding代替 内层元素透明边框 border:1px solid trans
上下Margin叠加问题
無為
07-12 3215
从盒子模型我们可以得知：对象之间的间距是由两个对象的盒子模型的最终计算值得出来的。但有一种特殊情况＝＝＝＝>上下对象的间距问题。当两个对象呈现出上下关系时而且都具备margin属性的时候，此时由margin所造成的外边距将会出现叠加的现象。还是下面例子吧.Margin叠加问题#a{width:100px;height:100px;backgrou
margin重叠问题的解决方法
jjw_zyfx的博客
09-15 131
效果如图： margin-top塌陷
margin重叠问题及解决方案全览
比起未来可期，我更喜欢如约而至
02-05 3656
项目中遇到了margin重叠问题，基于之前对这块知识掌握不熟练，所以学习之后在这里做一个总结吧。
DIV+CSS实现中间弹窗效果
qq605053977的博客
02-26 6169
css代码 body{ font-family: "Microsoft YaHei" ! important; } /*灰色遮罩层*/ .fade{ width:100%; height:100%; background:rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0;
网页左右晃动问题解决
qq605053977的博客
03-11 5703
不知道大家做网页时候有没有发现有个问题，网页内容为margin:0 auto;居中时,打开网页的一瞬间网页会向左摆一下,进了另一个页面时,网页又会向右摆一下,然后又向左摆回来,如果经常在页面中跳转,会看得头晕,原因是网页的高度不够时,右边的滚动条是不会出来的,这里网页的宽要加上滚动条的宽,margin:0 auto;时,网页的是居中的,但网页的高能够让浏览器出现滚动条时,这里的网页的宽当然就要减去
css缩写代码大全
qq605053977的博客
03-11 510
一、background-position：5px   10px         代表左   上 二、margin     padding：5   5   5    5    代表上   右    下     左 三、字体font的缩写       font:font-style     font-variant    font-weight   font-size   lin
css margin 的颜色修改
最新发布
03-31
CSS margin属性是用于设置元素周围空间的大小的。它不涉及颜色的设置，因此无法直接修改margin的颜色。如果您想要在元素周围添加一个背景色或边框，可以使用CSS的background和border属性来实现。例如，您可以使用以下代码将一个元素的背景色设置为红色： ```css .element { background-color: red; margin: 10px; } ``` 这将为元素添加一个10像素的margin，并设置它的背景色为红色。如果您想要添加一个边框，您可以使用border属性，如下所示： ```css .element { border: 1px solid blue; margin: 10px; } ``` 这将为元素添加一个1像素的蓝色边框，并设置它的margin为10像素。请注意，如果您同时设置了margin和border属性，它们的值将相互叠加。因此，如果您的元素有一个10像素的margin和一个1像素的边框，它将被显示为11像素的空间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值