Spacing — margin and padding · ระยะห่าง — margin และ padding
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · หน้านี้ต้องใช้เบราว์เซอร์ล่าสุด (รองรับ SharedArrayBuffer) กรุณาอัปเดต Chrome, Edge, Firefox หรือ Safari เป็นเวอร์ชันล่าสุด
English
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
ไทย
ระยะห่างระหว่างกล่อง
- Margin คือพื้นที่ ภายนอก ของกล่อง —也就是它与邻居之间的间隙。
margin: 30px;เพิ่ม 30 พิกเซลทั้งสี่ด้าน ด้านนอกของ Border- Padding ดัน เนื้อหาเข้า; Margin ดัน กล่องอื่นให้ห่างออกไป
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
ไทย
ตั้งค่าทีละด้าน
- คุณสามารถกำหนดระยะห่างแค่ด้านเดียวได้:
margin-top,margin-right,margin-bottom,margin-left - ใช้ได้กับ Padding เช่นกัน:
padding-left: 10px;, และอื่นๆ margin-bottomที่ใต้หัวข้อจะจัดระยะห่างออกจากข้อความได้อย่างเรียบร้อย
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
ไทย
ข้อผิดพลาดที่พบบ่อย
- Padding อยู่ภายใน Border; Margin คือพื้นที่ภายนอก
box-sizing: border-boxทำให้ความกว้างรวม Padding และ Border ด้วย
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
ไทย
ลองดูเลย
- Margin คือช่องว่าง ระหว่าง กล่อง; Padding คือพื้นที่ ภายใน กล่องหนึ่ง
- เพิ่ม Margin รอบๆ กล่อง แล้วตั้งระยะห่างใต้หัวข้อ
Explore · สำรวจ
margin vs padding · margin เทียบกับ padding
Padding is space inside the border; margin is space outside. · Padding คือพื้นที่ภายใน border; margin คือพื้นที่ภายนอก
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · ดันกล่องออกจากกัน เพิ่ม margin: 30px; ในกฎ .box
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · เพิ่มพื้นที่ด้านล่างของหัวเรื่องเท่านั้น เพิ่ม h1 { margin-bottom: 24px; }