CSS Box Model:A How-To Guide

เบราว์เซอร์ใช้รูปแบบกล่อง CSS เพื่อกำหนดว่าองค์ประกอบควรปรากฏบนหน้าเว็บอย่างไร โมเดลกล่องแสดงขนาดขององค์ประกอบและเส้นขอบ ช่องว่างภายใน และระยะขอบ คุณสามารถจัดรูปแบบองค์ประกอบแต่ละอย่างแยกกัน

ทุกองค์ประกอบล้อมรอบด้วยกล่อง ความสามารถในการเข้าใจว่ากล่องเหล่านี้ทำงานอย่างไรเป็นส่วนสำคัญของการวางตำแหน่งรายการในแบบที่คุณต้องการบนหน้าเว็บ

โมเดลกล่อง CSS ใช้เพื่อกำหนดว่ากล่องควรปรากฏอย่างไรและควรวางตำแหน่งอย่างไรบนหน้าเว็บ โมเดลนี้อ้างอิงถึงส่วนประกอบสี่ส่วน ได้แก่ เนื้อหา ช่องว่างภายใน เส้นขอบ และระยะขอบ ซึ่งประกอบเป็นกล่องใน CSS บทช่วยสอนนี้จะกล่าวถึงพื้นฐานของโมเดลกล่อง CSS และส่วนประกอบหลัก

โมเดลกล่อง CSS

โมเดลกล่อง CSS เป็นโครงสร้างที่ใช้กับกล่องทั้งหมดใน CSS โมเดลกล่องนี้จะแนะนำเบราว์เซอร์เกี่ยวกับวิธีที่ส่วนต่างๆ ของกล่องสร้างองค์ประกอบที่จะปรากฏบนหน้าเว็บ โมเดลกล่องแสดงถึงเนื้อหา ช่องว่างภายใน เส้นขอบ และระยะขอบของกล่อง

มาดูองค์ประกอบแต่ละส่วนของโมเดลกล่องกัน:

เนื้อหา เนื้อหาของกล่อง ซึ่งข้อความ แบบฟอร์ม รูปภาพ และองค์ประกอบเว็บอื่นๆ จะปรากฏขึ้น
แพดดิ้ง. ช่องว่างระหว่างสิ่งของในกล่องและขอบของกล่อง ช่องว่างภายในสำหรับกล่องมีความโปร่งใส
เส้นขอบ เส้นขอบที่ล้อมรอบเนื้อหาของกล่อง หรือรอบๆ ช่องว่างภายในของกล่อง หากระบุค่าการเติมไว้
ระยะขอบ. ช่องว่างระหว่างขอบด้านนอกของเส้นขอบและองค์ประกอบอื่นๆ บนหน้าเว็บ ช่องว่างภายในสำหรับกล่องมีความโปร่งใส

มาพูดคุยกันถึงส่วนประกอบแต่ละอย่างและวิธีใช้งานกัน

พื้นที่เนื้อหา

พื้นที่เนื้อหาอยู่ตรงกลางของรุ่นกล่อง นี่คือตำแหน่งที่ข้อความ รูปภาพ และองค์ประกอบอื่นๆ ปรากฏในองค์ประกอบเว็บ เราใช้คุณสมบัติ CSS ความสูงและความกว้างเพื่อกำหนดขนาดของพื้นที่เนื้อหา

โดยค่าเริ่มต้น ขนาดของพื้นที่เนื้อหาจะเท่ากับขนาดขององค์ประกอบ หากคุณมีบรรทัดข้อความ กล่องจะยาวและสูงเท่ากับบรรทัดข้อความ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

สมมติว่าเราต้องการออกแบบกล่องที่มีความสูง 200px กว้าง 200px เราสามารถทำได้โดยใช้รหัสนี้:

<html>


<p>This is a box.</p>

</html>

<style>

p {
	height: 200px;
	width: 200px;
}
</style>

CSS Box Model:A How-To Guide ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เราใช้แท็ก HTML

เพื่อสร้างย่อหน้าของข้อความ โปรดจำไว้ว่า ทุกองค์ประกอบในการออกแบบเว็บอยู่ในกล่อง ดังนั้นโมเดลกล่องจะนำไปใช้กับแท็ก

ของเรา ในโค้ด CSS ของเรา เราสร้างกฎที่กำหนดความสูงของแท็ก

ทั้งหมดเป็น 200px นอกจากนี้เรายังกำหนดความกว้างของแท็ก

ทั้งหมดเป็น 200px

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับความกว้างและความสูง และพื้นที่เนื้อหา CSS โปรดอ่านคู่มือเริ่มต้นเกี่ยวกับความสูงและความกว้างของ CSS

พื้นที่แพดดิ้ง

พื้นที่แพดดิ้งขยายพื้นที่เนื้อหา มันสร้างช่องว่างระหว่างเนื้อหาของกล่องและเส้นขอบ ช่องว่างภายในมักใช้เพื่อสร้างแบนเนอร์และองค์ประกอบประกาศอื่นๆ บนหน้าเว็บ

ในการใช้ช่องว่างภายในกับกล่อง เราสามารถใช้คุณสมบัติการเติม CSS สมมติว่าเราต้องการใช้ช่องว่างภายใน 25px รอบกล่องสุดท้ายของเรา เราสามารถทำได้โดยใช้รหัสนี้:

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
}
</style>

CSS Box Model:A How-To Guide ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เราระบุคุณสมบัติ "padding" และตั้งค่าเป็น 20px ซึ่งจะสร้างช่องว่าง 20px ระหว่างพื้นที่เนื้อหาของกล่องและเส้นขอบของกล่อง

ขณะนี้มีช่องว่างระหว่างกล่องของเรากับขอบของหน้า

เขตแดน

พื้นที่ชายแดนเป็นที่ที่เส้นขอบสำหรับกล่องจะปรากฏขึ้น เส้นขอบเป็นเส้นขอบสีภายนอกช่องว่างภายใน คุณสามารถใช้สีใดก็ได้เพื่อจัดรูปแบบเส้นขอบ มีการออกแบบขอบในตัวจำนวนมากเช่นกัน

สมมติว่าเราต้องการเพิ่มเส้นขอบสีฟ้าอ่อนกว้าง 5px รอบกล่องของเรา เราสามารถทำได้โดยใช้รหัสนี้:

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
}
</style>

CSS Box Model:A How-To Guide ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เราใช้คุณสมบัติ CSS "border" เพื่อกำหนดเส้นขอบสีฟ้าอ่อนกว้าง 5px เส้นขอบนี้ใช้รูปแบบ "ทึบ" ซึ่งสร้างเส้นขอบบรรทัดเดียว สังเกตว่าเส้นขอบของเราแยกออกจากเนื้อหาในกล่องของเรา นี่เป็นเพราะเราได้ระบุช่องว่างภายใน 20px ไว้รอบๆ กล่องของเรา

พื้นที่มาร์จิ้น

พื้นที่ขอบเป็นชั้นนอกสุดของแบบจำลองกล่อง พื้นที่นี้จะสร้างช่องว่างที่แยกองค์ประกอบออกจากองค์ประกอบอื่นๆ บนหน้าเว็บ

สมมติว่าเราต้องการสร้างช่องว่าง 10px ระหว่างสองกล่องบนหน้าเว็บ เราสามารถทำได้โดยใช้รหัสนี้:

<html>


<p>This is a box.</p>
<p>This is another box.</p>

</html>
<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
	margin: 10px;
}
</style>

CSS Box Model:A How-To Guide ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ครั้งนี้ เราได้ระบุสองช่องในไฟล์ HTML ของเรา จากนั้น เราได้เพิ่มระยะขอบ 10px ให้กับกล่องโดยใช้คุณสมบัติ “ระยะขอบ”

อย่างที่คุณเห็น ขณะนี้มีช่องว่าง 10px ระหว่างกล่องของเรา เนื่องจากเราใช้ระยะขอบกับกล่องของเรา สิ่งนี้จะสร้างช่องว่างระหว่างเส้นขอบของกล่องของเรากับองค์ประกอบอื่นๆ บนหน้าเว็บ

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับพื้นที่ขอบ โปรดอ่านบทแนะนำเกี่ยวกับขอบ CSS

การคำนวณความกว้างและความสูง

ข้อผิดพลาดประการหนึ่งที่ผู้เริ่มต้นมักจะทำคือสมมติว่าความสูงขององค์ประกอบและความกว้างขององค์ประกอบนั้นเกี่ยวข้องกับช่องว่างภายใน ระยะขอบ และเส้นขอบ ไม่ถูกต้อง

คุณสมบัติความสูงและความกว้างช่วยให้คุณกำหนดความสูงและความกว้างของพื้นที่เนื้อหา ขององค์ประกอบเว็บ ซึ่งไม่นับรวมองค์ประกอบอื่นๆ บนหน้าเว็บ

หากเราต้องการทราบว่าตัวอย่างกล่องทั้งหมดของเราใช้พื้นที่ว่างเท่าใดจากก่อนหน้านี้ เราจำเป็นต้องทำการคำนวณอย่างรวดเร็ว นี่คือค่าที่เราระบุไว้ในตัวอย่าง "พื้นที่ขอบ" จากส่วนก่อนหน้า:

ความสูง:200px
ความกว้าง:200px
ช่องว่างภายใน:20px
ระยะขอบ:10px
เส้นขอบ:5px

ในการคำนวณความกว้าง เราสามารถใช้สูตรต่อไปนี้:

200px (กว้าง) +
40px (ช่องว่างภายในซ้ายและขวา) +
10px (ขอบซ้ายและขวา) +
20px (ระยะขอบซ้ายและขวา)

ทำให้เรามีทั้งหมด 270px .

ในการคำนวณความสูง เราจะใช้ความสูงของกล่อง นอกจากนี้เรายังจะใช้ค่าบนและล่างสำหรับการเติม เส้นขอบ และระยะขอบ

บทสรุป

โมเดลกล่อง CSS เป็นโครงสร้างที่ใช้เพื่อแสดงองค์ประกอบบนหน้าเว็บ ทุกองค์ประกอบใน HTML เป็นกล่องสี่เหลี่ยม โมเดลกล่องกำหนดว่าเนื้อหา การเติม เส้นขอบ และระยะขอบจะปรากฏอย่างไรสำหรับกล่อง

คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบหน้าเว็บด้วย CSS หรือไม่? ดูคู่มือวิธีการเรียนรู้ CSS ของเรา คู่มือนี้ประกอบด้วยรายการแหล่งข้อมูลการเรียนรู้ชั้นนำที่คุณสามารถใช้สร้างความรู้เกี่ยวกับ CSS ได้