# margin

[CSS](..) ⟩ [box model]() ⟩ margin&#x20;

{% hint style="info" %}
_<mark style="color:purple;">**margin**</mark>_ 的特性：

* `margin` 的「背景」永遠是「**透明**」的。
* 如果是 `inline` 元素，`margin` 的「**垂直方向沒有效果**」。
* 可使用 `px` , `rem` ... 等單位，也可以設定 `auto` 讓網頁自動計算。
* 若設定 `%`，則以「**父元素寬度**」為準。 :star:&#x20;
* 可以是「[負值](margin/negative)」，此時不同區塊可能會**重疊**。
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* [negative](margin/negative "mention")
{% endtab %}

{% tab title="📘 手冊" %}
* MDN ⟩ [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
* :green\_book: [深入理解 CSS Box Model](https://www.oxxostudio.tw/articles/202008/css-box-model.html)
* :blue\_book: [Margin Collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
{% endtab %}
{% endtabs %}

## 重點 <a href="#notes" id="notes"></a>

{% tabs %}
{% tab title="Result" %}
{% embed url="https://codepen.io/lochiwei/pen/mdmLvVZ" %}
{% endtab %}

{% tab title="JS" %}
```javascript
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);
}
```
{% endtab %}

{% tab title="CSS" %}
```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);
}
```
{% endtab %}

{% tab title="HTML" %}
```markup
<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>
```
{% endtab %}
{% endtabs %}

## margins between elements

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

{% tabs %}
{% tab title="Result" %}
{% embed url="https://codepen.io/lochiwei/pen/MWmZrJO" %}
{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}
