การจัดวางองค์ประกอบแบบบล็อกโดยมีระยะห่างด้านซ้ายใน CSS

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

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

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	margin-left: auto; /* กำหนดระยะห่างซ้ายอัตโนมัติ */
	height: 100px;
	width: 200px;
	border: 1px solid green;
}