CSS 原理 - Collapsing margins

什麼是 Collapsing margins?

先來看一段 W3C 規範 的敘述:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

CSS 原理 - Containing block

Containing block,中文常被翻譯為包含塊,它其實代表的是一個「區域」,一個由 box model 的 content edge 或 padding edge (若有設定 padding)所圍繞的範圍,它攸關元素的定位、寬高、內距與外距的計算,所以必須清楚知道元素的 containing block 是誰,才不會使畫面失控。

CSS 原理 - Box model

想像每個元素都是個盒子,而 <html> 就像是個超級大盒子,裡面裝了許許多多大小不一的盒子,像是 <div>、<p>、<span>、<button>…等等,而每個盒子由四個部分組成。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×