margin

docs

• 📘 margin

• 📗 深入理解 CSS Box Model

• 📘 Margin Collapsing

Second Tab

重點

• margin 的「背景」永遠是「透明」的。

• 如果是 inline 元素，margin 的「垂直方向沒有效果」。

• 大小可使用 px , rem ... 等單位，也可以設定 auto 讓網頁自動計算。

• 大小若設定 %，則以「父元素寬度」為準。 ⭐

• 大小可以是「負值」，此時不同區塊可能會產生「重疊」的現象。

Result

JS

const {log} = console;

const control = $('#control');
const div3 = $('#div3');
const label = $('#label');
const calc = $('#calc');

// marginControl.oninput
control.addEventListener('input', (e) => {
    let x = e.target.value;
    let percent = x + '%';
    label.textContent = 'marginTop: ' + percent;
    calc.textContent = `${percent} x 200px = ${2*x}px`
    div3.style.marginTop = percent;
});

// ⭐️ 自動跑一次 'oninput' event
control.dispatchEvent(new Event('input'));

/* --------------- helpers ----------------- */

// $ ⭐️ selector
function $(selector, parent = document){
  return parent.querySelector(selector);
}

CSS

#div1 {
    width: 200px;
    border: 1px solid black;
}

#div2, #div3 {
    height: 100px;
}

#div2 {

    /* ⭐️ vertical & horizontal align */
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(255, 0, 0, 0.3);
    font-weight: bold;
}

#div3 {
    margin-block-start: 10%;
    background-color: rgba(0, 255, 21, 0.3);
}

HTML

<input type="range" id="control" min="-100" max="100" value="0">
<label for="marginControl" id="label"></label>

<p>
  margin 若設定 %，則以「父元素寬度」為準。<br />
  <span id="calc"></span>
</p>

<div id="div1">
  <div id="div2">
    <p>200 x 100</p>
  </div>
  <div id="div3"></div>
</div>

margins between elements

/* 
    use adjacent sibling combinator (+) 
    to apply a margin between buttons.
*/
.button + .button {
    margin-block-start: 0.5em;
}

Result

Second Tab