เมื่อฉันเริ่มเรียนรู้วิธีเขียนมาร์กอัปโดยใช้ HTML และ CSS ครั้งแรก ฉันต้องใช้เวลาพอสมควรกว่าจะนึกถึงความแตกต่างระหว่างระยะขอบและช่องว่างภายในในโมเดลกล่อง ในบทความนี้ ฉันจะแบ่งปันว่าในที่สุดฉันก็สามารถแยกความแตกต่างระหว่างคนทั้งสองได้อย่างไร
เมื่อพูดถึงระยะขอบและช่องว่างภายใน เป็นการดีที่สุดที่จะทบทวนว่ารูปแบบกล่อง CSS ทำงานอย่างไร ลองนึกถึงโมเดลกล่อง ซึ่งเป็นคอนเทนเนอร์ที่เราใส่ส่วนประกอบต่างๆ ของเว็บไซต์ของเราเป็นรูปภาพที่วางไว้ในกรอบรูป:
เนื้อหา คือภาพนั่นเอง – สิ่งที่เราต้องการใส่ในภาชนะ รอบๆ มันคือ padding .
ถ้าเราอยู่ในร้านกรอบ แผ่นรองก็จะเป็นแผ่นปู ซึ่งทำให้ต้องใช้กรอบรูปที่ใหญ่ขึ้น เมื่อเราเพิ่ม padding ใน CSS เราจะผลักกล่องเนื้อหาของเราออกเพื่อทำให้คอนเทนเนอร์ใหญ่ขึ้น Padding คือช่องว่างระหว่างเนื้อหาและเส้นขอบ
ถัดมาเป็น ชายแดน – โดยพื้นฐานแล้วมันคือเฟรมที่เก็บเนื้อหาและช่องว่างภายในของเรา ระยะขอบ คือช่องว่างระหว่างองค์ประกอบที่อยู่ติดกัน (กรอบรูปของเรา) บนวิวพอร์ตของเรา (ผนัง)
คำถามจึงกลายเป็นว่า เราควรใช้ระยะขอบเมื่อใดและเมื่อใดจึงควรใช้การเติม
บางคนอาจบอกว่าคำตอบนี้เป็นความคิดเห็นส่วนตัวเล็กน้อย แต่โดยทั่วไป ควรใช้ระยะขอบ CSS หากเราต้องการปรับรูปลักษณ์ขององค์ประกอบที่สัมพันธ์กับองค์ประกอบอื่นๆ บนหน้า ควรใช้ padding เมื่อเราต้องการให้พื้นที่รอบๆ เนื้อหาใหญ่ขึ้น
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
การตั้งค่าระยะขอบและช่องว่างภายใน
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Margin vs Padding</title>
</head>
<style>
body {
background: darkslategray;
width: 100%;
height: 100vh;
max-width: 800px;
display: flex;
margin: 0 auto;
justify-content: space-evenly;
align-items: center;
}
#star-wars {
background: ivory;
border: 20px solid cyan;
}
#lotr {
background: ivory;
border: 20px solid green;
}
</style>
<body>
<div id="star-wars">
<h3>Star Wars Chars</h3>
<div>
<p>Hans Solo</p>
<p>Luke Skywalker</p>
<p>Obi Wan Kenobi</p>
<p>Chewbacca</p>
<p>R2D2</p>
<p>C3PO</p>
</div>
</div>
<div id="lotr">
<h3>Lord of the Rings Chars</h3>
<div>
<p>Bilbo</p>
<p>Gandalf</p>
<p>Frodo</p>
<p>Sam</p>
<p>Legolas</p>
<p>Aragorn</p>
</div>
</div>
</body>
</html>
ในตัวแก้ไขโค้ดด้านบน มีการตั้งค่าสองกล่องที่มีพื้นหลัง เนื้อหา และเส้นขอบพื้นฐาน ลองนึกภาพสถานการณ์ที่คุณต้องการให้ช่องว่างภายในและระยะขอบแตกต่างกันในแต่ละด้าน ใน <style> ลองใช้ขนาดต่างๆ กันทุกด้าน เช่น
#star-wars {
background: ivory;
border: 20px solid cyan;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
อย่างที่กล่าวไปแล้ว มีชวเลขที่คุณสามารถใช้ได้:margin: 10px 25px 30px 5px; ตัวเลขกำลังมีปัญหา (TRBL):บน ขวา ล่าง และซ้าย! นี่คือลำดับที่คุณจะพบว่าไม่เพียงแค่ระยะขอบและช่องว่างภายในเท่านั้น แต่ยังรวมถึงคุณสมบัติอื่นๆ ที่ใช้การจดชวเลขเพื่ออธิบายด้านข้างของกล่องของคุณ
เป็นไปได้มากว่า คุณจะมีสถานการณ์ที่ระยะขอบด้านบนและด้านล่าง/ช่องว่างภายในจะเท่ากัน และระยะขอบซ้ายและขวาจะเท่ากัน หากเป็นเช่นนั้น คุณสามารถใช้ทางลัด:
#star-wars {
background: ivory;
border: 20px solid cyan;
margin: 20px 30px;
padding: 30px 20px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin: 20px 30px;
padding: 30px 20px;
ตัวเลขแรกคือระยะขอบด้านบนและด้านล่าง/ช่องว่างภายใน และหมายเลขที่สองคือระยะขอบด้านซ้ายและด้านขวา/ช่องว่างภายใน
หากด้านทั้งหมดจะเท่ากัน คุณสามารถพูดว่า padding: 30px; or margin: 30px;
บทสรุป
ในบทความนี้ เราได้ทบทวนแง่มุมต่างๆ ของโมเดลกล่องและพูดคุยถึงความแตกต่างระหว่างระยะขอบและการเติม โปรดจำไว้ว่าระยะขอบเกี่ยวข้องกับพื้นที่นอกเส้นขอบและช่องว่างภายในเกี่ยวข้องกับพื้นที่ภายในเส้นขอบ เล่นกับระยะขอบและช่องว่างภายในของคอนเทนเนอร์ในโปรแกรมแก้ไขโค้ดด้านบน และคุณจะเป็นผู้เชี่ยวชาญในการตั้งค่าระยะขอบและช่องว่างภายในในเวลาไม่นาน
