กล่องกับระยะห่าง — padding, margin, border และหน่วยที่ใช้

Google Chrome (headless) บน macOS
// วัดด้วย getBoundingClientRect() และ getComputedStyle()

1 · ทุกอย่างบนหน้าเว็บคือกล่องสี่เหลี่ยม

ประโยคเดียวที่ต้องเชื่อก่อนเริ่ม: ไม่ว่าคุณจะเขียน element อะไร เบราว์เซอร์มองมันเป็นสี่เหลี่ยมเสมอ
ตัวอักษรกลม ๆ ปุ่มขอบมน รูปวงกลม — ข้างในเบราว์เซอร์มันคือสี่เหลี่ยมทั้งหมด แค่ทาสีให้ดูไม่เหมือน

และสี่เหลี่ยมหนึ่งอันไม่ได้มีชั้นเดียว มันมีสี่ชั้นซ้อนกัน จากในออกนอก:

   +-----------------------------------------+
   |  MARGIN                                 |
   |   +-----------------------------------+ |
   |   |  BORDER                           | |
   |   |   +-----------------------------+ | |
   |   |   |  PADDING                    | | |
   |   |   |   +---------------------+   | | |
   |   |   |   |  CONTENT            |   | | |
   |   |   |   +---------------------+   | | |
   |   |   |                             | | |
   |   |   +-----------------------------+ | |
   |   |                                   | |
   |   +-----------------------------------+ |
   |                                         |
   +-----------------------------------------+

ช่องขวาสุดของตารางนี้คือวิธีดูด้วยตาเปล่าว่าอันไหนคือ padding อันไหนคือ margin — ทาสีพื้นให้กล่อง แล้วดูว่าสีขยายตามไปด้วยหรือไม่ ถ้าขยาย = padding ถ้าไม่ขยาย = margin

<style>
  .wrap { background: #eef2f7; border: 2px dashed #74c0fc; }
  .pad  { background: #ffd8a8; padding: 24px; }
  .mar  { background: #a5d8ff; margin: 24px; }
</style>

<div class="wrap">
  <div class="pad">padding: 24px — พื้นสีส้มขยายออกไปด้วย</div>
  <div class="mar">margin: 24px — พื้นสีฟ้าไม่ขยาย ที่ว่างเป็นสีของพ่อ</div>
</div>

สังเกตให้ดี: กล่องส้มกับกล่องฟ้าเว้นที่ไว้เท่ากันคือ 24px แต่หน้าตาต่างกันคนละเรื่อง — ส้มกลืนที่ว่างเข้ามาเป็นของตัวเอง ส่วนฟ้ายกที่ว่างนั้นให้พ่อ (พื้นเทา) ไป

2 · เขียน padding กับ margin — สี่แบบที่เจอในโค้ดจริง

สไลด์หน้า 43 กับ 44 โชว์รูปแบบการเขียนไว้ครบแล้ว ทั้งสอง property ใช้กติกาเดียวกันเป๊ะ เปลี่ยนแค่ชื่อ ดังนั้นจำครั้งเดียวได้ทั้งคู่:

margin มีของแถมที่ padding ไม่มีอยู่สองอย่าง: รับค่าติดลบได้ (ดึงกล่องให้ทับกัน) และรับคำว่า auto ได้ ซึ่ง margin: 0 auto; คือวิธีจัดกล่องให้อยู่กลางแนวนอนที่คุณจะเจอในทุกโปรเจกต์

3 · border — สามอย่างในบรรทัดเดียว

border เป็น shorthand ที่รวมสามค่าไว้ในบรรทัดเดียว: ความหนา · รูปแบบ · สี
ที่ต้องรู้คือ ถ้าไม่ใส่ style เส้นจะไม่ขึ้นเลย — ค่าเริ่มต้นของ border-style คือ none ใส่ border: 4px red; อย่างเดียวจึงไม่เห็นอะไรทั้งนั้น

<style>
  .b1 { border: 4px solid #495057;  padding: 8px; margin-bottom: 12px; }
  .b2 { border: 4px dashed #e8590c; padding: 8px; margin-bottom: 12px; }
  .b3 { border-width: 4px;
        border-style: solid;
        border-color: #1971c2;
        border-radius: 12px;
        padding: 8px; }
</style>

<div class="b1">border: 4px solid #495057;</div>
<div class="b2">border: 4px dashed #e8590c;</div>
<div class="b3">เขียนแยกสามบรรทัด + border-radius</div>

สองบรรทัดแรกกับสามบรรทัดหลังให้ผลเหมือนกัน ต่างกันแค่ความยาว — ในโค้ดจริงคนใช้ shorthand เกือบตลอด แล้วค่อยใช้แบบแยกเมื่อต้องแก้เฉพาะบางส่วนทีหลัง เช่น border-color: red; ตอน hover

4 · กับดักที่หนึ่ง — width: 100% แล้วล้น

นี่คือกับดักที่มือใหม่เจอเป็นอันดับหนึ่ง และเจอภายในชั่วโมงแรกที่เริ่มจัดหน้า
ลองทายก่อนดูเฉลย:

.frame { width: 300px; }

.card  { width: 100%;
          padding: 20px;
          border: 4px solid red; }

/* .card เป็นลูกของ .frame */

<style>
  .frame { width: 300px; border: 2px dashed #adb5bd; }
  .card  { width: 100%;
           padding: 20px;
           border: 4px solid #c92a2a;
           background: #ffe3e3; }
</style>

<div class="frame">
  <div class="card">width: 100% + padding 20 + border 4 → ล้นออกนอกกรอบ</div>
</div>

เส้นประเทาคือกรอบ 300px · กล่องแดงคือลูกที่สั่ง width: 100% — จะเห็นชัดว่ามันโผล่พ้นเส้นประออกไปทั้งสองข้าง

ทางแก้คือบรรทัดเดียว: box-sizing: border-box; ซึ่งเปลี่ยนความหมายของ width จาก "ความกว้างของ content" เป็น "ความกว้างรวม padding และ border แล้ว"

<style>
  .frame { width: 300px; border: 2px dashed #adb5bd; }
  .card  { width: 100%;
           padding: 20px;
           border: 4px solid #2f9e44;
           background: #d3f9d8;
           box-sizing: border-box; }
</style>

<div class="frame">
  <div class="card">เพิ่ม box-sizing: border-box บรรทัดเดียว → พอดี 300px</div>
</div>

คราวนี้กล่องเขียวพอดีกับเส้นประเป๊ะ · ผมวัดได้ 300 ตรง ๆ และที่ว่างข้างในหดจาก 300 เหลือ 300 − 20×2 − 4×2 = 252 — นั่นคือสิ่งที่ border-box ทำ: มันไม่ได้ทำให้ padding หายไป มันเบียดที่ของ content แทน

5 · กับดักที่สอง — margin สองอันบนล่างกัน "ยุบรวมกัน"

กับดักนี้เจอทีหลัง แต่ทำให้คนงงนานกว่า เพราะมันไม่มีอะไรล้น ไม่มีอะไรพัง แค่ระยะห่างที่ได้ไม่ตรงกับที่สั่ง แล้วคนก็ไปนั่งเพิ่มตัวเลขจนกว่าจะดูดี

.top { margin-bottom: 40px; }
.bot { margin-top: 24px; }

/* .top กับ .bot เป็น div ธรรมดา วางบนล่างติดกัน */

<style>
  .stack { background: #ffec99; border: 1px solid #f59f00; }
  .box   { background: #d0ebff; border: 1px solid #74c0fc; }
  .top   { margin-bottom: 40px; }
  .bot   { margin-top: 24px; }
</style>

<div class="stack">
  <div class="box top">กล่องบน — margin-bottom: 40px</div>
  <div class="box bot">กล่องล่าง — margin-top: 24px</div>
</div>

แถบเหลืองตรงกลางคือช่องว่างที่ได้จริง 40px
ทีนี้ดูกล่องถัดไป — โค้ดเหมือนเดิมทุกตัวอักษร เพิ่มแค่สองบรรทัดที่ .stack:

<style>
  .stack { background: #ffec99; border: 1px solid #f59f00;
           display: flex; flex-direction: column; }
  .box   { background: #d0ebff; border: 1px solid #74c0fc; }
  .top   { margin-bottom: 40px; }
  .bot   { margin-top: 24px; }
</style>

<div class="stack">
  <div class="box top">กล่องบน — margin-bottom: 40px</div>
  <div class="box bot">กล่องล่าง — margin-top: 24px</div>
</div>

แถบเหลืองกว้างขึ้นชัดเจน — ผมวัดได้ 64px คือ 40 + 24 บวกกันจริง ๆ
เพราะ ข้างในกล่อง flex ไม่มีการยุบรวม margin · นี่คือหนึ่งในเหตุผลที่คนสมัยนี้ เลิกใช้ margin จัดระยะระหว่างกล่อง แล้วหันไปใช้ gap ของ flex/grid แทน (เรื่องของบทเรียน 61)

6 · หน่วย — px % rem em vh vw

สไลด์หน้า 46 ลิสต์หน่วยไว้หกตัว แต่ไม่ได้บอกว่าเลือกอันไหนเมื่อไหร่ ซึ่งคือส่วนที่ทำให้พลาดจริง มาไล่ทีละตัวว่า "ค่านี้อ้างอิงจากอะไร":

ความต่างระหว่าง em กับ rem เห็นชัดที่สุดตอนซ้อนกันหลายชั้น:

<style>
  .card { font-size: 20px; }
  .em1  { font-size: 1.5em; }
  .em2  { font-size: 1.5em; }
  .rem1 { font-size: 1.5rem; }
</style>

<div class="card">พ่อตั้ง font-size: 20px
  <div class="em1">1.5em ของฉัน = 30px
    <div class="em2">1.5em ซ้อนอีกชั้น = 45px</div>
  </div>
  <div class="rem1">1.5rem = 24px เสมอ (16 × 1.5)</div>
</div>

ตัวเลขในกล่องนั้นไม่ใช่ที่ผมเขียนเอา — ผมอ่านจาก getComputedStyle() จริง: 30px · 45px · 24px
em ทบต้น — ชั้นที่สองคือ 1.5 ของ 30 ไม่ใช่ 1.5 ของ 20 ซ้อนสี่ชั้นเมื่อไหร่ก็คำนวณในหัวไม่ทันแล้ว
ส่วน rem อ้างจากรากเดียวเสมอ ซ้อนกี่ชั้นก็ยัง 24px

ส่วน % มีกับดักของตัวเองอยู่หนึ่งอัน ที่แทบไม่มีใครเตือน:

<style>
  .frame { width: 200px; height: 300px; border: 2px dashed #adb5bd; }
  .p     { padding: 10%; background: #e5dbff; }
</style>

<div class="frame">
  <div class="p">padding: 10% ได้ 20px ทุกด้าน — บนล่างก็คิดจากความกว้าง 200px</div>
</div>

พ่อกว้าง 200 สูง 300 · ถ้า padding-top: 10% คิดจากความสูง มันควรได้ 30px แต่ผมวัด getComputedStyle() ได้ 20px ทั้งบนและซ้าย — เพราะ % ของ padding กับ margin คิดจากความกว้างของพ่อเสมอ ทุกด้าน
ฟังดูไม่มีเหตุผล แต่มันคือกติกาที่ทำให้เทคนิคจัดสัดส่วนภาพ 16:9 ทำงานได้ — และเป็นเหตุผลที่คนไม่ค่อยใช้ % กับระยะห่าง

7 · font-size · font-family · color · background

สี่ตัวนี้ (สไลด์หน้า 38–42) ตรงไปตรงมาที่สุดในบท ไม่มีกับดักซ่อน มีแค่สองอย่างที่ควรรู้:

• font-family เขียนเป็นรายการสำรองคั่นด้วยจุลภาค เบราว์เซอร์ไล่จากซ้ายไปขวา ตัวไหนมีในเครื่องก็ใช้ตัวนั้น — ตัวสุดท้ายควรเป็นชื่อกลุ่มอย่าง sans-serif ไว้กันเหนียว ชื่อฟอนต์ที่มีเว้นวรรคต้องใส่เครื่องหมายคำพูด
• background-color กับ background-image อยู่คนละชั้น ไม่ได้แทนที่กัน — image อยู่บน color อยู่ล่าง ถ้ารูปโหลดไม่ขึ้นหรือมีส่วนโปร่งใส จะเห็นสีข้างล่างโผล่มา ใส่ทั้งคู่จึงเป็นเรื่องปกติ ไม่ใช่เขียนซ้ำซ้อน

<style>
  .hero { font-family: "Noto Sans Thai", sans-serif;
          font-size: 20px;
          color: #ffffff;
          background-color: #364fc7;
          background-image: linear-gradient(135deg, #364fc7, #c2255c);
          padding: 24px;
          border-radius: 12px; }
  .hero .small { font-size: 0.75rem; color: #dbe4ff; }
</style>

<div class="hero">ข้อความนี้ใช้ font-size · color · background-image พร้อมกัน
  <div class="small">บรรทัดนี้ 0.75rem = 12px และสีจางลง</div>
</div>

<style>
  .item { background-color: lightslategray;
          background-color: #ffff00;
          padding: 16px; }
</style>

<div class="item">สองบรรทัดในกฎเดียวกัน — บรรทัดล่างชนะ</div>

8 · display เบื้องต้น — กล่องนี้เป็นกล่องแบบไหน

ก่อนจะไปเรื่อง flexbox ในบทหน้า ต้องรู้ก่อนว่า display ตอบคำถามว่า "กล่องนี้วางตัวยังไงเทียบกับกล่องรอบ ๆ" — สี่ค่าที่ต้องรู้ตอนนี้:

<style>
  .tag { width: 120px; height: 40px;
         background: #ffd8a8; border: 1px solid #e8590c; }
  .a { display: inline; }
  .b { display: inline-block; }
  .c { display: block; }
  .d { display: none; }
</style>

<span class="tag a">inline</span>
<span class="tag b">inline-block</span>
<span class="tag c">block</span>
<span class="tag d">none</span>

ทั้งสี่กล่องสั่ง width: 120px; height: 40px; เหมือนกันเป๊ะ แต่ผลต่างกันสี่แบบ:
· inline — กล่องแรก แคบพอดีข้อความ ตัวเลข 120 กับ 40 ถูกเมินทั้งคู่ (ผมวัดกล่องนี้ในหน้านี้ได้ 39.89 × 20 คือความกว้างของข้อความ 37.89 บวก border 1px สองข้าง — กล่อง inline ยังรับ border กับ padding แนวนอนอยู่ ที่มันเมินคือ width กับ height เท่านั้น · ตัวเลขนี้ขึ้นกับฟอนต์ในเครื่องคุณ จะไม่ตรงเป๊ะก็ไม่แปลก — ที่ต้องตรงคือมันไม่ใช่ 120 × 40)
· inline-block — กล่องที่สอง อยู่บรรทัดเดียวกับตัวแรก และได้ขนาดตามสั่งจริง (วัดขอบนอกได้ 122 × 42 คือ 120 + 1×2 กับ 40 + 1×2 ที่บวก border เข้ามา — content-box จากหัวข้อ 4 กลับมาอีกครั้ง)
· block — กล่องที่สาม เด้งลงบรรทัดใหม่
· none — ไม่มีกล่องที่สี่ ทั้งที่เขียน <span> ไว้ใน HTML จริง ๆ

9 · สรุปเป็นลำดับการตัดสินใจ

อยากเว้นที่...
  |
  +-- ระหว่างเนื้อหากับขอบกล่องตัวเอง? ----> padding
  |
  +-- ระหว่างกล่องนี้กับกล่องอื่น? --------> margin  (ระวังยุบรวม)
  |                                          หรือ gap ถ้าพ่อเป็น flex/grid
  |
  +-- อยากได้เส้นกรอบด้วย? --------------> border  (อย่าลืม style)

ตั้ง width/height แล้วผลไม่ตรง...
  |
  +-- ล้นออกนอกพ่อ? --------------------> box-sizing: border-box
  |
  +-- ไม่มีผลเลย? ----------------------> element เป็น inline อยู่

ทดสอบความเข้าใจ

อ้างอิง

• MDN — The box model — อ่านหัวข้อ Parts of a box กับ The alternative CSS box model สองหัวข้อนี้ครอบคลุมหัวข้อ 1 และ 4 ของบทนี้ทั้งหมด และมีภาพ box model แบบทางการให้ดู
• MDN — box-sizing — อ่านหัวข้อ Values เพื่อดูนิยามของ content-box กับ border-box ตรง ๆ แล้วเลื่อนลงไปดูตัวอย่างที่กดสลับสองโหมดเทียบกันได้
• MDN — Mastering margin collapsing — อ่านรายการสามข้อที่ขึ้นต้นว่า Adjacent siblings / No content separating parent and descendants / Empty blocks คือสามกรณีที่การยุบรวมเกิดขึ้น · หัวข้อ 5 ของบทนี้ครอบสองข้อแรก ข้อที่สามยังไม่ได้พูดถึง
• MDN — CSS values and units — อ่านตารางในหัวข้อ Relative length units ซึ่งบอกชัดว่า em กับ rem อ้างอิงจากอะไร (และเป็นที่มาของกล่องเตือนเรื่องสไลด์หน้า 46 ในบทนี้)
• MDN — display — อ่านหัวข้อ Outer display types ก็พอสำหรับตอนนี้ (block กับ inline) ส่วน Inner display types คือเรื่องของบท flexbox
• linear-gradient() — อ่านสามตัวอย่างแรก ก็ใช้ทำพื้นหลังสวย ๆ ได้แล้วโดยไม่ต้องมีไฟล์รูปเลย