ระยะห่างภายใน
ระยะห่างภายใน
ระยะห่างภายใน เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ
สวัสดีค่ะ/ครับ
ยินดีต้อนรับสู่บทเรียนระยะห่างภายในของ CSS
ระยะห่างภายในใช้สร้างพื้นที่ภายในขอบเขตขององค์ประกอบ HTML
เช่นเดียวกับระยะขอบ เราสามารถเพิ่มระยะห่างภายในทั้ง 4 ด้านให้กับองค์ประกอบได้
ประเภทเปอร์เซ็นต์
ในตัวอย่างก่อนหน้านี้ เรากำหนดค่าระยะห่างภายในแบบค่าคงที่ในหน่วย px เช่นเดียวกับระยะขอบ เราสามารถกำหนดค่าเป็นเปอร์เซ็นต์ได้
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
การทำให้โค้ดสั้นลง
เช่นเดียวกับระยะขอบ เราสามารถกำหนดในบรรทัดเดียวได้ด้วยรูปแบบย่อของระยะห่างภายใน
เราสามารถเพิ่มค่าระยะห่างภายในสำหรับด้านบน ด้านขวา ด้านล่าง และ ด้านซ้าย โดยเว้นวรรคระหว่างค่าตามลำดับ
ลองดูโค้ดตัวอย่าง แล้วจะเห็นว่ามีลักษณะคล้ายกับระยะขอบมาก
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>ขอแสดงความยินดี
ขอแสดงความยินดี 🎉
ในส่วนนี้ เราได้เรียนรู้ระยะขอบ CSS
ในส่วนถัดไป เราจะเรียนรู้สีและพื้นหลัง
คำถามที่พบบ่อย
บทเรียน “ระยะห่างภายใน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ระยะห่างภายใน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ