在內部元素和外部元素之間創建空間

我是一名HTML初學者，我知道填充是內容和邊框之間的空間，而邊距是邊框之外的空間。在內部元素和外部元素之間創建空間

所以，如果我想創建內部元件與外界之間存在某種空間 - 就像我從 pic1 - original status要 pic2 - excepted result的效果，它應該把padding-top: 100px;外部元件上，而不是把margin-top: 100px;內部元素。

所以，我的問題是，當我把margin-top: 100px;內部元件上不能創造空間（ pic3 - no effect css setting），但爲什麼當我把margin-top: 300px;外部元件身體和外部元件之間創造空間嗎？

，然後我試圖把內部元件上的外界因素上都padding-top: 100px;和margin-top: 100px;，和我有一個奇怪的結果（ pic4 - surprised result），即margin-top: 100px;內部元件的工作了！那麼，我還不明白什麼概念或細節，誰能告訴我？順便說一下，這是我第一次問問題的計算器:)

pic1 - original status

pic2 - excepted result 把padding-top: 100px;外部元件

pic3 - no effect css setting 把margin-top: 100px;內部元件

pic4 - surprised result 將padding-top: 100px;放在外部元素和margin-top: 100px;內部元件

HTML

<body> 
    <div class="center outside"> 
     <div class="center inside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.</div> 
    </div> 
</body>

PIC的CSS 1

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
}

PIC的CSS 2

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    padding-top: 100px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
}

PIC的CSS 3

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    margin-top: 100px; 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
}

上

CSS元素崩潰的PIC 4

.center { 
    margin: 0 auto; 
} 

.outside { 
    margin-top: 300px; 
    padding-top: 100px; 
    width: 30%; 
    background-color: coral; 
} 

.inside { 
    margin-top: 100px; 
    padding: 20px; 
    width: 80%; 
    background-color: aquamarine; 
}

來源

2017-11-11 Srichsun

您需要出示** **完整的標記，顯示的問題。您尚未提供任何HTML。 [mcve]您需要搜索「摺疊邊距」。 – Rob

謝謝@Rob！我將檢查有用的文章，以及「SO」的含義是什麼？ – Srichsun

我以爲我提供了HTML代碼的基本部分？ – Srichsun

邊距（特別是在頂部和底部）的，當他們觸摸一起或蓋父/子元素的利潤率。因爲這些規則可能會變得有點複雜，所以不是那麼高級的css用戶應該儘可能地避免使用邊距，而是使用填充。

就你的情況而言，由於父元素沒有邊框或填充，因此瀏覽器使用父和子的最大邊距，並將其放在父元素的周圍。

點擊此處瞭解詳情： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

來源

2017-11-11 16:10:38

非常感謝！我知道邊緣塌陷發生在相鄰的兄弟姐妹身上，但不知道它也發生在父母和子女之間。我現在很清楚:) – Srichsun

在內部元素和外部元素之間創建空間

回答

相關問題