<nav id="qvmyt"><address id="qvmyt"></address></nav>
<pre id="qvmyt"></pre>
<u id="qvmyt"><listing id="qvmyt"></listing></u>


    <li id="qvmyt"><menuitem id="qvmyt"></menuitem></li>
    <li id="qvmyt"><source id="qvmyt"></source></li><progress id="qvmyt"><sub id="qvmyt"></sub></progress>
    <optgroup id="qvmyt"></optgroup>
  • 歡迎來到AD8000.CN 站長教程網!

    CSS

    當前位置:主頁 > 網頁制作 > CSS >

    css中margin-top或者margin-bottom失效的解決方法

    時間:2017-11-22|欄目:CSS|點擊:

    css中margin-top是設置容器的外間距了距離了,div嵌套后,margin-top或者margin-bottom失效了,在網上打到下面的方法可以解決。
    設計頁面的時候遇到一個神奇的問題,下面是html的代碼
      <body>
      <div class="homeNav">
      <div class="homeCategory  ">
      </div>
      </div>
      </body>
    此時我設置子容器homeCategory的樣式:
    .homeCategory{
      margin-top:30px;
    }
    發現margin相對的父容器搞錯了,找到body去了,成了相對于body來設置margin,此時設置了homeNav 的高度和寬度都沒效果,讓我抓狂不已,div都不聽話了,調試了半天終于找到了原因。
    原因:
    在兩個嵌套的div,如果外層div的父容器padding值為0,
    那么內層div的margin-top或者margin-bottom的值會”轉移”給外層div,也就是父容器的父容器。
    解決辦法:
    1:設置父容器的的樣式加上:overflow:hidden。
    2:把對父容器的margin-top外邊距改成padding-top內邊距。
    3:給父容器div加樣式, padding-top: 1px。
    4:給父容器div加樣式,position: absolute。
    5:把父元素變成一個 block formating context ,下面是可選的方法
    a、float: left/right
    b、position: absolute
    c、display: inline-block/table-cell
    d、overflow: hidden/auto
    建議使用方法1。

    上一篇:沒有了

    欄    目:CSS

    下一篇:瀏覽器的User Agent Stylesheet解決方法

    本文標題:css中margin-top或者margin-bottom失效的解決方法

    本文地址:

    您可能感興趣的文章

    說點什么吧
    • 全部評論(0
      還沒有評論,快來搶沙發吧!

    廣告投放 | 聯系我們 | 版權申明

    重要申明:本站所有的文章、圖片、評論等,均由網友發表或上傳并維護或收集自網絡,屬個人行為,與本站立場無關。

    如果侵犯了您的權利,請與我們聯系,我們將在24小時內進行處理、任何非本站因素導致的法律后果,本站均不負任何責任。

    聯系QQ:215436232 | 郵箱:215436232#qq.com(#換成@)

    Copyright © 2020-2022 站長教程網 AD8000.CN 版權所有

    河北懦蟹装饰工程有限公司