已解決430363個問題，去搜搜看，總會有你想問的

子元素的邊距移動父元素

首頁猿問子元素的邊距移動父元素

子元素的邊距移動父元素

Html/CSS

梵蒂岡之花 2019-06-14 10:00:26

子元素的邊距移動父元素我有一個div (父母)包含另一個div (兒童)。父元素是body沒有特別的CSS樣式。當我開始.child { margin-top: 10px; }最終的結果是，我的孩子的頂部仍然與父母保持一致。我的父母不是向下移動10 px，而是向下移動10 px。我的DOCTYPE設置為XHTML Transitional.我在這里錯過了什么？編輯1我的父級需要嚴格定義尺寸，因為它有一個必須從上到下顯示的背景(像素完美)。因此，在其上設置垂直邊距是不去.編輯2這種行為在FF、IE以及CR上都是一樣的。

查看完整描述

3 回答

慕桂英4014372

TA貢獻1871條經驗獲得超13個贊

找到了另一種選擇在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>元素。

可悲的是，在現代設計中，當你明確地想要一個容器時，這個想法會咬你。這叫做新的塊格式上下文用CSS說。這個overflow或者毛邊戲法會給你這個機會。

反對回復 2019-06-14

侃侃爾雅

TA貢獻1801條經驗獲得超16個贊

這是正常行為(至少在瀏覽器實現中)。邊距不影響子節點相對于其父節點的位置，除非父節點有填充，在這種情況下，大多數瀏覽器都會將子節點的邊距添加到父節點的填充中。

為了得到你想要的行為，你需要：

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

反對回復 2019-06-14

3 回答
0 關注
507 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

子元素的邊距移動父元素

子元素的邊距移動父元素

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

子元素的邊距移動父元素

子元素的邊距移動父元素

3 回答

相關問題推薦

添加回答