ทำความเข้าใจ Width Height Margin และ Padding
เรียนรู้ว่า width, height, margin และ padding กำหนดขนาดกับระยะห่างขององค์ประกอบอย่างไร
ทำความเข้าใจ Width Height Margin และ Padding เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวคิดโมเดลกล่อง
องค์ประกอบ HTML ทุกตัวจะแสดงผลเป็นกล่องสี่เหลี่ยม โมเดลกล่องของ CSS อธิบายสี่ชั้นที่ประกอบกันเป็นกล่องนี้จากด้านในออกด้านนอก ได้แก่ เนื้อหา → ระยะห่างภายใน → เส้นขอบ → ระยะห่างภายนอก
ความกว้างและความสูง
width และ height กำหนดขนาดของ พื้นที่เนื้อหา ตามค่าเริ่มต้น ระยะห่างภายในและเส้นขอบจะถูกเพิ่มจากขนาดนี้
<div class="box"></div>
ระยะห่างภายใน
padding คือพื้นที่โปร่งใส ด้านในเส้นขอบ ซึ่งอยู่ระหว่างเนื้อหากับขอบเส้นขอบ และเป็นส่วนหนึ่งของพื้นที่ที่คลิกได้หรือพื้นที่ที่วาดพื้นหลังขององค์ประกอบ
<div class="card">Card content</div>
คุณสมบัติระยะห่างภายในแบบแยกรายด้าน
สามารถกำหนดแต่ละด้านแยกกันได้:
<div class="element">Padded element</div>
ระยะห่างภายนอก
margin คือพื้นที่โปร่งใส ด้านนอกเส้นขอบ ช่วยผลักองค์ประกอบอื่นออกไป ระยะห่างภายนอกที่เป็นค่าลบจะดึงองค์ประกอบให้เข้าใกล้กันหรือทำให้ซ้อนทับกัน
<div class="section">Centered section with bottom margin</div>
การยุบรวมระยะห่างภายนอก
ระยะห่างภายนอกแนวตั้งจะยุบรวมกันระหว่างองค์ประกอบแบบบล็อกที่อยู่ติดกัน ช่องว่างจริงจะมีขนาดเท่ากับระยะห่างที่มากกว่า ไม่ใช่ผลรวมของทั้งสองค่า ส่วนระยะห่างภายนอกแนวนอนจะไม่ยุบรวมกัน
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
การป้องกันการยุบรวมระยะห่างภายนอก
การยุบรวมระยะห่างภายนอกจะไม่เกิดขึ้นเมื่อ:
- องค์ประกอบเป็นลูกของ flex หรือ grid
- องค์ประกอบแม่มี
overflow: hidden - องค์ประกอบแม่มี
paddingคั่นระหว่างองค์ประกอบแม่กับลูกคนแรก - มีองค์ประกอบแบบอินไลน์คั่นระหว่างองค์ประกอบพี่น้อง
การจัดกึ่งกลางด้วยระยะห่างภายนอกอัตโนมัติ
การตั้งค่าระยะห่างภายนอกแนวนอนเป็น auto ให้กับองค์ประกอบแบบบล็อกที่มีความกว้างตายตัว จะจัดองค์ประกอบนั้นให้อยู่กึ่งกลางคอนเทนเนอร์ นี่คือเทคนิคการจัดกึ่งกลางแบบคลาสสิก
<div class="centered">Centered block, max 800px wide</div>
ขนาดต่ำสุดและสูงสุดของความกว้างและความสูง
จำกัดขนาดด้วยขอบเขตต่ำสุดและสูงสุด เพื่อให้องค์ประกอบยังอ่านได้บนหน้าจอหลายขนาด:
<div class="content">Readable content column capped at 65 characters wide.</div>
การคำนวณขนาดรวมขององค์ประกอบ
ในโมเดล content-box ซึ่งเป็นค่าเริ่มต้น ความกว้างรวม = width + padding-left + padding-right + border-left + border-right ผลลัพธ์นี้อาจทำให้สับสน จึงนิยมใช้ border-box มากกว่า
คุณสมบัติระยะห่างภายนอกและภายในแบบเชิงตรรกะ
CSS สมัยใหม่มีคุณสมบัติแบบเชิงตรรกะที่เทียบเท่ากัน ได้แก่ margin-block, margin-inline, padding-block-start และอื่น ๆ คุณสมบัติเหล่านี้จะปรับตามทิศทางการเขียนโดยอัตโนมัติ
<div class="card">Logical padding-block/inline</div>
ตรวจสอบอย่างรวดเร็ว
ในโมเดลกล่องเริ่มต้น มีชั้นใดบ้างรวมอยู่ในความกว้างที่แสดงผลทั้งหมดขององค์ประกอบแบบบล็อก?
สรุป
ชั้นของโมเดลกล่องประกอบด้วยเนื้อหา ระยะห่างภายใน เส้นขอบ และระยะห่างภายนอก ระยะห่างภายในอยู่ด้านในเส้นขอบ ส่วนระยะห่างภายนอกอยู่ด้านนอก ระยะห่างภายนอกแนวตั้งจะยุบรวมกันระหว่างองค์ประกอบพี่น้องที่อยู่ติดกัน ใช้ margin: 0 auto ร่วมกับความกว้างตายตัวเพื่อจัดองค์ประกอบแบบบล็อกให้อยู่กึ่งกลาง
คำถามที่พบบ่อย
บทเรียน “ทำความเข้าใจ Width Height Margin และ Padding” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ทำความเข้าใจ Width Height Margin และ Padding” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ทำความเข้าใจ Width Height Margin และ Padding”
เรียนรู้ว่า width, height, margin และ padding กำหนดขนาดกับระยะห่างขององค์ประกอบอย่างไร คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ทำความเข้าใจ Width Height Margin และ Padding” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจ Width Height Margin และ Padding
- รูปแบบ ความกว้าง และสีเส้นขอบ
- Box-Sizing: Content-Box เทียบกับ Border-Box
- เส้นกรอบและเงากล่อง