子元素上的邊距移動父元素

時間 2020-02-13

標籤元素邊距移動欄目無線简体版

原文原文鏈接

我有一個div （父），其中包含另外一個div （子）。 Parent是沒有特殊CSS樣式的body的第一個元素。當我設定 css

.child
{
    margin-top: 10px;
}

最終結果是個人孩子的頂部仍然與父母對齊。個人父母沒有將孩子向下移動10px，而是將其向下移動10px。 html

個人DOCTYPE設置爲XHTML Transitional 。瀏覽器

我在這裏想念什麼？ spa

編輯1
個人父母須要嚴格定義尺寸，由於它的背景必須從上到下顯示（像素完美）。所以，在其上設置垂直邊距是不可行的 。設計

編輯2
在FF，IE和CR上，此行爲相同。 code

#1樓

我也遇到了這個問題，但更但願防止出現負利潤黑客攻擊，所以我提出了 orm

<div class="supercontainer"></div> htm

周圍都有填充而不是邊距。固然，這意味着更多的神經，但這多是正確完成此操做的最乾淨的方法。對象

#2樓

這是正常現象（至少在瀏覽器實現中）。保證金不會影響孩子相對於其父對象的位置，除非父對象具備填充，在這種狀況下，大多數瀏覽器會將孩子的保證金添加到父對象的填充中。 get

要得到所需的行爲，您須要：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

#3樓

的margin包含內的元件的.child正在崩潰。

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

在此示例中， p從瀏覽器默認樣式接收margin 。瀏覽器的默認font-size一般font-size 。在#child上的margin-top超過#child您開始注意到它的位置移動。

#4樓

父元素至少不能爲空，至少要放置  在子元素以前。

#5樓

在子元素中找到了替代項，並在DIV中留有邊距您還能夠添加：

.parent { overflow: auto; }

要麼：

.parent { overflow: hidden; }

這樣能夠防止邊距崩潰。邊框和填充相同。所以，您還可使用如下內容來防止利潤暴跌：

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

根據受歡迎的要求進行更新：頁邊空白的所有要點是處理文本內容。例如：

<style type="text/css">
    h1, h2, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
</div>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

因爲瀏覽器會摺疊邊距，所以文本將如您指望的那樣顯示，而且<div>包裝器標籤不會影響邊距。每一個元素確保其周圍有間距，但間距不會加倍。 <h2>和<p>的邊距不會累加，但會彼此滑動（摺疊）。 <p>和<ul>元素<ul>發生一樣的狀況。

可悲的是，對於現代設計，當您明確想要一個容器時，這個想法可能會咬你。在CSS語言中，這稱爲新塊格式化上下文。 overflow或保證金技巧將爲您提供。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。