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

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

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

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

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

Результат: