มาร์จิ้น CSS

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

คุณสมบัติระยะขอบ CSS และคุณสมบัติย่อยสี่คุณสมบัติ ใช้เพื่อกำหนดระยะขอบรอบองค์ประกอบใน HTML

บทช่วยสอนนี้จะกล่าวถึงวิธีการใช้คุณสมบัติขอบและคุณสมบัติย่อยเพื่อสร้างขอบรอบองค์ประกอบใน CSS พร้อมข้อมูลอ้างอิงและตัวอย่าง เมื่ออ่านบทช่วยสอนนี้จบแล้ว คุณจะเป็นผู้เชี่ยวชาญในการใช้ CSS ระยะขอบกับองค์ประกอบเว็บ

CSS Margin

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

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

ทุกองค์ประกอบในหน้าเว็บประกอบด้วยกล่องอย่างน้อยหนึ่งกล่อง องค์ประกอบต่างๆ ใช้โมเดลกล่องเพื่อสรุปวิธีการแสดงกล่องบนหน้าเว็บ

ระยะขอบเป็นหนึ่งในองค์ประกอบหลักของแบบจำลองกล่องและอยู่บนชั้นนอกสุดของแบบจำลองกล่อง ในกราฟิกด้านล่าง คุณจะเห็นว่ามีการใช้ระยะขอบนอกเส้นขอบในองค์ประกอบ HTML:

สำหรับจุดประสงค์ของบทช่วยสอนนี้ เราจะเน้นที่คุณสมบัติระยะขอบ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับส่วนประกอบต่างๆ ของโมเดลกล่อง โปรดอ่านบทความเกี่ยวกับ CSS borders and padding

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

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

CSS Margin แต่ละด้าน

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

ขอบบน
ขอบขวา
ขอบล่าง
ระยะขอบซ้าย

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

ความยาว ระบุระยะขอบโดยใช้ px, em หรือการวัดความยาว CSS อื่น
เปอร์เซ็นต์ (%) ระบุระยะขอบเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบที่ใช้ระยะขอบ
อัตโนมัติ สั่งให้เบราว์เซอร์คำนวณระยะขอบ
สืบทอด ระบุระยะขอบควรสืบทอดมาจากองค์ประกอบหลัก

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

สมมติว่าเรากำลังออกแบบกล่องและเราต้องการรวมระยะขอบรอบกล่องเพื่อแยกกล่องออกจากองค์ประกอบอื่นๆ บนหน้าเว็บ กล่องของเราควรมีระยะขอบบน 50px ระยะขอบซ้าย 30px ระยะขอบขวา 40px และระยะขอบล่าง 50px เราสามารถสร้างกล่องนี้โดยใช้รหัสต่อไปนี้:

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 40px;
	margin-bottom: 40px;
	border: 1px solid red;
}

.outer {
	border: 1px solid blue;
}

รหัสของเราส่งคืน:

ในรหัสของเรา เราได้สร้างสองกล่อง กล่องแรกซึ่งกำหนดโดยใช้แท็ก

ถูกกำหนดคลาส outer . ในไฟล์ CSS ของเรา เราระบุว่าองค์ประกอบใดๆ ที่มี outer คลาสควรมีเส้นขอบสีน้ำเงินทึบกว้าง 1px เราได้กำหนดเส้นขอบนี้เพื่อแสดงระยะขอบที่กล่องด้านในของเราสร้างขึ้น

ภายในแท็ก

ของเรามีแท็ก

ซึ่งมีข้อความ This is a box . แท็ก

ของเรามีชื่อคลาส box ซึ่งหมายถึงรูปแบบสำหรับ box ในไฟล์ CSS ของเราถูกนำไปใช้กับองค์ประกอบ

ของเรา

แท็ก

ของเราถูกกำหนดระยะขอบบน 50px, ระยะขอบซ้าย 30px, ระยะขอบขวา 40px และระยะขอบล่าง 40px นอกจากนี้เรายังได้ให้แท็ก

ของเรามีขอบสีแดงทึบกว้าง 1px ดังที่คุณเห็นในภาพด้านบน ระยะขอบของเราได้สร้างช่องว่างระหว่างเส้นขอบของกล่อง

และกล่องสีน้ำเงินของเรา ถ้าเราไม่มีระยะขอบ กล่องเหล่านี้จะอยู่ใกล้กันมากขึ้น

ชวเลขมาร์จิ้น CSS

ในตัวอย่างข้างต้น เราใช้โค้ดถึงสี่บรรทัดเพื่อระบุระยะขอบที่เราต้องการใช้กับกล่องของเรา เราสามารถทำให้โค้ดของเรามีประสิทธิภาพมากขึ้นโดยใช้คุณสมบัติระยะขอบ

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

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

สี่ค่า

แทนที่จะใช้คุณสมบัติย่อยระยะขอบแต่ละรายการเพื่อสร้างกล่องที่มีค่าระยะขอบที่แตกต่างกันสี่ค่า คุณสามารถใช้คุณสมบัติชวเลขระยะขอบและระบุค่าสี่ค่าได้

หากคุณระบุค่าสี่ค่าด้วยคุณสมบัติมาร์จิ้น ลำดับที่มาร์จิ้นของคุณจะปรากฏเป็นดังนี้:

ค่าแรกคือระยะขอบบน
ค่าที่สองคือระยะขอบด้านขวา
ค่าที่สามคือระยะขอบด้านล่าง
ค่าที่สี่คือระยะขอบด้านซ้าย

สมมติว่าเราต้องการสร้างกล่องที่มีระยะขอบบน 25px ระยะขอบขวา 25px ระยะขอบล่าง 50px และระยะขอบซ้าย 60px เราสามารถทำได้โดยใช้รหัสนี้:

box {
	margin: 25px 25px 50px 60px;
border: 1px solid red;
}

รหัสของเราส่งคืน:

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

สามค่า

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

ลำดับของระยะขอบทั้งสามที่คุณระบุจะถูกนำไปใช้กับกล่องหนึ่งๆ มีดังนี้:

ค่าแรกคือระยะขอบบน
ค่าที่สองคือระยะขอบสำหรับด้านขวาและด้านซ้ายขององค์ประกอบ
ค่าที่สามคือระยะขอบด้านล่าง

สมมติว่าเราต้องการสร้างกล่องที่มีระยะขอบ 50px ที่ด้านบนของกล่อง ระยะขอบ 25px ที่ด้านซ้ายและด้านขวาของกล่อง และระยะขอบ 60px ที่ด้านล่างของกล่อง เราสามารถสร้างกล่องที่มีระยะขอบเหล่านี้โดยใช้รหัสต่อไปนี้:

รหัสของเราส่งคืน:

สามค่า

ค่าแรกคือระยะขอบบน
ค่าที่สองคือระยะขอบสำหรับด้านขวาและด้านซ้ายขององค์ประกอบ
ค่าที่สามคือระยะขอบด้านล่าง

.box {
	margin: 50px 25px 60px;
border: 1px solid red;
}

รหัสของเราส่งคืน:

อย่างที่คุณเห็น ด้านซ้ายและด้านขวาของกล่องด้านในของเรามีค่าระยะขอบเท่ากันคือ 25px และด้านบนและด้านล่างมีระยะขอบของตัวเอง (50px และ 60px ตามลำดับ)

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

สองค่า

ถ้าคุณต้องการให้กล่องมีค่าระยะขอบเท่ากันสำหรับด้านบนและด้านล่างของกล่อง และค่าอื่นสำหรับด้านขวาและด้านซ้ายของกล่อง คุณสามารถใช้คุณสมบัติระยะขอบและระบุค่าสองค่า

ลำดับการใช้ค่าที่คุณระบุกับองค์ประกอบคือ:

ค่าแรกคือระยะขอบสำหรับด้านบนและด้านล่างของกล่อง
ค่าที่สองคือระยะขอบด้านขวาและด้านซ้ายของกล่อง

สมมติว่าคุณต้องการสร้างกล่องที่มีระยะขอบแนวตั้ง 50px และระยะขอบแนวนอน 30px คุณสามารถสร้างกล่องนี้โดยใช้รูปแบบ CSS ต่อไปนี้:

.box {
	margin: 50px 30px;
border: 1px solid red;
}

รหัสของเราส่งคืน:

ด้านบนและด้านล่างของกล่องของเรามีระยะขอบ 50px และด้านซ้ายและด้านขวาทั้งคู่มีระยะขอบ 30px

ในโค้ดของเรา เรายังระบุเส้นขอบสีแดงรอบกล่องด้านในเพื่อแสดงขนาดของระยะขอบของเรา เรายังนำโค้ดจากตัวอย่างก่อนหน้านี้มาใช้ซ้ำเพื่อสร้างกล่องสีน้ำเงินซึ่งแสดงพื้นที่ที่ระยะขอบของเราสร้างขึ้นระหว่างกล่องด้านในและด้านนอก

หนึ่งค่า

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

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

.box {
	margin: 50px;
	border: 1px solid red;
}

รหัสของเราส่งคืน:

ทุกขอบของกล่องของเรามีระยะขอบ 50px เราระบุเส้นขอบสีแดงรอบๆ กล่องของเราเพื่อแสดงว่าระยะขอบของเราถูกนำไปใช้นอกเส้นขอบของกล่อง และเราได้สร้างกล่องสีน้ำเงินโดยวางกล่องสีแดงไว้เพื่อแสดงระยะขอบของเราให้ดียิ่งขึ้น

การสืบทอดมาร์จิ้น

ค่าที่สืบทอดมาใช้เพื่อสืบทอดมาร์จิ้นจากองค์ประกอบหลัก

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

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

.box {
	margin-left: inherit;
	border: 1px solid red;
}

.outer {
	margin-left: 50px;
	border: 1px solid blue;
}

รหัสของเราส่งคืน:

กล่องด้านนอกของเรา (กล่องที่มีเส้นขอบสีน้ำเงิน) มีระยะขอบด้านซ้าย 50px นอกจากนี้ กล่องด้านในของเรา (ช่องที่มีขอบสีแดง) มีระยะขอบด้านซ้าย 50px ซึ่งสืบทอดมาจากองค์ประกอบหลัก

มาร์จิ้นอัตโนมัติ

ค่าอัตโนมัติใช้เพื่อจัดองค์ประกอบตามแนวนอนภายในคอนเทนเนอร์

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

สมมติว่าคุณได้สร้างกล่องที่มีความกว้าง 250px ภายในกล่องที่มีความกว้าง 500px หากคุณใช้คำสำคัญอัตโนมัติเพื่อสร้างระยะขอบ ระยะขอบ 125px จะถูกนำไปใช้กับทั้งด้านซ้ายและด้านขวาของช่อง เราคำนวณโดยใช้สูตรต่อไปนี้:

(Outer Box Width - Inner Box Width) / 2

ในกรณีนี้ เราใช้ผลรวมต่อไปนี้เพื่อคำนวณด้านข้างของมาร์จิ้นที่สร้างขึ้นโดยอัตโนมัติ:

(500 - 250) / 2

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

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

รหัสของเราส่งคืน:

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

กล่องด้านในของเราไม่มีระยะขอบที่ขอบด้านบนหรือด้านล่าง เนื่องจากเราไม่ได้ระบุสำหรับตัวอย่างของเรา

บทสรุป

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

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