The box model · โมเดลของกล่อง
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
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
ไทย
ทุกกล่องมีชั้น
- CSS พิจารณาองค์ประกอบทุกอย่างในฐานะ กล่อง
- เนื้อหา คือข้อความหรือภาพของคุณ Padding คือพื้นที่ ภายใน รอบๆ เนื้อหา
- Border (ขอบ) คือเส้นรอบๆ พื้นที่ Padding Margin (ระยะห่างภายนอก) คือพื้นที่ด้านนอกที่ดันกล่องอื่นให้ห่างออกไป
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
ไทย
Padding และ Border
padding: 20px;เพิ่มพื้นที่ภายใน 20 พิกเซล ทั้งสี่ด้านborder: 2px solid black;วาดเส้น — โดยระบุ ความกว้าง, รูปแบบ, แล้วตามด้วย สี- Padding ทำให้กล่องดูมีพื้นที่สบายตา; Border ทำให้กล่องโดดเด่นขึ้น
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
ไทย
ข้อผิดพลาดที่พบบ่อย
- โครงสร้างกล่องคือ เนื้อหา, ตามด้วย Padding, แล้วเป็น Border, และสุดท้ายคือ Margin (จากในออกนอก)
- Padding เพิ่มพื้นที่อยู่ภายในขอบ
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
ไทย
ลองดูเลย
- Padding อยู่ ภายใน; ส่วน Border จะล้อมรอบมัน
- เพิ่ม Padding ให้กล่องก่อน แล้วจึงเพิ่ม Border
Explore · สำรวจ
The CSS box model · CSS Box Model
Every box is content + padding + border + margin around it. · ทุกกล่องคือ content + padding + border + margin ล้อมรอบ
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · กำหนดพื้นที่หายใจภายในให้กล่อง เพิ่ม padding: 20px; ในกฎ .box
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · วาดเส้นรอบกล่อง เพิ่ม border: 2px solid navy; ในกฎ .box — รักษาสองส่วนสามส่วนตามลำดับ: width, style, colour