ระยะขอบ
ระยะขอบ
ระยะขอบ เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ
ระยะขอบเป็นหนึ่งในหัวข้อที่สำคัญที่สุดใน CSS
ระยะขอบคือพื้นที่ที่เราสร้างไว้รอบขอบเขตขององค์ประกอบ
อธิบายด้านต่าง ๆ ของระยะขอบ
ไม่ว่าองค์ประกอบจะเป็นประเภทใด เมื่อสร้างระยะขอบ เราไม่ควรคิดว่าเป็นการกำหนด 4 ด้าน (ด้านบน ด้านขวา ด้านล่าง และ ด้านซ้าย)
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>คำเตือน
เช่นเดียวกับที่เรากำหนดค่าเฉพาะให้ค่า margin ได้ เราก็สามารถกำหนดค่าเป็นเปอร์เซ็นต์ได้เช่นกัน
คำเตือน
เช่นเดียวกับการกำหนดค่าเฉพาะให้ระยะขอบ เราสามารถกำหนดค่าเป็นเปอร์เซ็นต์ได้เช่นกัน
รูปแบบย่อของระยะขอบ
ในตัวอย่างก่อนหน้านี้ เราต้องเขียนโค้ด 4 บรรทัดเพื่อกำหนดระยะขอบให้กับทุกด้านของกล่อง
CSS มีรูปแบบย่อสำหรับระยะขอบเพื่อให้เราเขียนโค้ดได้สั้นลง
หลังจากกำหนดคุณสมบัติระยะขอบแล้ว เราสามารถกำหนดค่าระยะขอบโดยเว้นวรรคระหว่างค่าเหล่านั้นตามลำดับ ได้แก่ ด้านบน ด้านขวา ด้านล่าง และด้านซ้าย (ตามเข็มนาฬิกา)
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
คำเตือนเกี่ยวกับระยะขอบติดลบ
ระยะขอบสามารถรับค่าติดลบได้ ส่วนระยะห่างภายในที่เราจะเรียนในบทเรียนถัดไปไม่สามารถรับค่าติดลบได้
margin auto
เราจะใช้ค่า auto ของคุณสมบัติระยะขอบเพื่อจัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอน ไม่ว่าความละเอียดหน้าจอจะเป็นเท่าใด เนื้อหาก็จะอยู่กึ่งกลางในแนวนอน
สมมติว่าหน้าจอกว้าง 1200px และองค์ประกอบของเรากว้าง 400px องค์ประกอบจะอยู่กึ่งกลาง โดยมีพื้นที่ด้านซ้ายและด้านขวาด้านละ 400px
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>ขอแสดงความยินดี
ขอแสดงความยินดี 🎉
ในส่วนนี้ เราได้เรียนรู้ระยะขอบ CSS
ในส่วนถัดไป เราจะเรียนรู้ระยะห่างภายใน CSS
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 16
- บทเรียน
- 35
คำถามที่พบบ่อย
บทเรียน “ระยะขอบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ระยะขอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ระยะขอบ”
ระยะขอบ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน
บทเรียน “ระยะขอบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ