精华内容
下载资源
问答
  • 前端开发中,有时候会遇到设置子级divmargin属性后,导致整个父级div整体移动,有时候却是正常的,时而正常时而异常。
  • DIV设置margin-top影响父DIV位置的解决办法 2015-07-23 12:42:22来源:威易网作者:icech 在设置子DIV的margin-top时候,如果与父DIV之间无任何元素的间隔,那么就会让父DIV的位置收到影响。如图: ...

    子DIV设置margin-top影响父DIV位置的解决办法

    2015-07-23 12:42:22来源:威易网作者:icech

    在设置子DIV的margin-top时候,如果与父DIV之间无任何元素的间隔,那么就会让父DIV的位置收到影响。如图:


    在设置子DIV的margin-top时候,如果与父DIV之间无任何元素的间隔,那么就会让父DIV的位置收到影响。如图:


    代码如下:
    <style>
    .zb-tips{ margin-top: 30%; }
    </style>
    <div class="zb-container">
        <div class="ui-tips ui-tips-warn zb-tips">
            <i></i><span>签到失败!请下载并安装“xxx”APP扫描二维码</span>
        </div>
    </div>

    原因是:所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。这个问题的避免方法很多,只要破坏它出现的条件就行。给 Outer Div 加上 padding/border,或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。

    如何解决这个问题呢?方法有多个:

    方法1:在父DIV的css加上“overflow:hidden;”。这种方法是目前来看最完美的解决办法。

    方法2:在父DIV的css加上“border:1px solid transparent;”。

    方法3:在父DIV的css加上float或者position:absolute。

    方法4:在父DIV的css加上padding-top来代替margin实现效果。

    展开全文
  • 关于内层DIV设置margin-top不起作用的解决方案

    关于内层DIV设置margin-top不起作用的解决方案

    参考文章:

    (1)关于内层DIV设置margin-top不起作用的解决方案

    (2)https://www.cnblogs.com/huangyong8585/archive/2013/05/21/3090779.html


    备忘一下。


    展开全文
  • 之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动。我用代码和图描述一下问题: [html]view plaincopy <spanstyle="font-size:14px;"><style...

      之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动。我用代码和图描述一下问题:

     

    [html] view plain copy
     
    1. <span style="font-size:14px;"><style>  
    2.  *{margin:0;padding:0;}  
    3.  .div1{background:green;height:100px;}  
    4.  .div2{background:darkblue;height:100px;}  
    5.  .subDiv{background:red;height:40px;}  
    6. </style>  
    7. <body>  
    8. <div class="div1"></div>  
    9. <div class="div2">  
    10.   <div class="subDiv"></div>  
    11. </div>  
    12. </body></span>  


    效果是:

     



    红色div是蓝色div的子div。然后我设置红色div的margin-top为20px;

    结果如下:

     

    可以看到,设置margin-top之后,父div跟着子div向下移动了。(白色层为空白处,非div层)

     

    解决这个问题的方法是,为父div设置border。为此,我为父div设置border-top:1px solid darkblue;

    结果显示:

     

    可以看到,子div向下移动了,但是父div并没有向下移动。

     

    网上找到的原理:

    一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

        虽然可以通过给父div添加border可以解决问题,但是总觉得不太好。每次为了实现这样的效果而设置border-top,好像有点累赘。后来在网上看了一些博文,觉得很不错。大概的意思是:margin是用于隔开两个独立元素,而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容,为了使元素和内容隔开,可以使用padding。

        于是,我在父div里面设置了padding-top,也达到了目的

    转载于:https://www.cnblogs.com/hanguidong/p/8961330.html

    展开全文
  • div里的div设置margin没有效果

    千次阅读 2020-01-03 21:49:56
    问题:div里的div设置外边距(margin)没有效果 html <div class="login_box"> <div class="fdiv"> <span>登录</span><span>/注册</span> </div> </div> css ...

    问题:div里的div设置外边距(margin)没有效果

    错误
    html

    <div class="login_box">
        <div class="fdiv">
            <span>登录</span><span>/注册</span>
        </div>
    </div>
    

    css

        <style>
            .login_box{
                width: 400px;
                height: 400px;
                background-color: rgba(0,0,0,0.8);
                margin: 150px auto;
            }
            .fdiv{
                margin:65px 70px;
            }
        </style>
    

    解决方案1:

    给父元素(login_box)添加内边距

    padding-top: 1px;
    

    解决方案2:

    给父元素(login_box)添加浮动

    float: left;
    

    解决方案3:(比较推荐)

    给父元素(login_box)添加overflow属性
    注意:overflow:visiable

    overflow: hidden;
    

    解决方案4:

    为父元素添加border

    border: 1px solid;
    

    解决方案5:

    为父元素添加绝对定位

    position:absolute;
    
    展开全文
  • 答案是20 你们可能会想为什么不是40呢?这就要好好理解一下盒子模型了(如下图所...换句话说就是上下两个div设置margin,最终的距离由大的决定 例如:上下两个div设置margin分别为20px,30px,两个div的间距是30px ...
  • 之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动。我用代码和图描述一下问题:   *{margin:0;padding:0;} .div1{background:green;height:100px;} .div2{...
  • 1、css未设置margin属性时,效果图如下: 没有margin设置 2、css设置 margin-top:50px 属性时,预期效果图如下: 预期效果图 3、css设置 margin-top:50px 属性时,实际效果图如下: ...
  • 问题描述:子div设置margin-top的时候,父的div也会跟着向下移动。 原因:一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 解决...
  • 这要谈到css的盒模型margin的合并问题 css在盒模型中规定 In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or ...
  • div设置 margin-left, margin-right 为 auto 时在IE的怪异模式下不居中测试环境:IE7、IE8解决办法:在怪异模式下设置text-align:center;*html body { text-align:center;}如果body前加上*html 在开发工具的body元素...
  • 关于内层DIV设置margin-top不起作用的解决方案 代码如下: <div>上部层</div> <div> <!--父层--><div style="margin-top:200px;">子层</div></div> 理想中的效果是...
  • *{margin: 0;padding: 0;} .pare{width: 600px;height: 600px;background-color: #ccc;} .child{width: 300px;height: 300px;background-color: red;margin: 50px;} ... 在设置DIVmargin-t
  • 测试代码如下: ...margin: 0px auto;background-color: #919191;overflow:hidden;} /*.container{width: 50%;margin: 0px auto;background-color: #919191;position: absolute;}*/ /*.con
  • 父级并没有完全保住子集,父级没有包含子集的margin-top部分, 原因:CSS2.1的盒模型中规定: In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, ...
  • 在HTML里,子DIV元素设置margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置。 一、编写代码。 <!DOCTYPE html> <html lang="en"> <head> </head> <...
  • 为父div设置border 在父div里面设置了padding-top margin是用于隔开两个独立元素, 而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容, 为了使元素和内容隔开,可以使用padding ...
  • html: <div class="main"> <div class="content"></div> </div>... margin:0; padding:0; } .main{ width:200px; height:200px; background:tomato; } .content{...
  • 再说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己上级(父元素,祖先元素)。只要给上级设置个有效的 border或者padding就可...
  • 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素,祖先元素,所有需要在父元素设置border,或者padding 转载于:...

空空如也

空空如也

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

div设置margin