Ý nghĩa của thuộc tính "margin: 0 auto" trong CSS3?

[hhm549]

Chả là mình đang tập tành học lập trình front-end. Mình chưa hiểu lắm về cái thuốc tính này. Mình thấy hầu hết bài tập nào cũng có cái phần này nhưng không biết ý nghĩa của nó là gì? khi nào mình sẽ dùng tới nó? Cảm ơn các bạn nhé

[Soju]

margin là thuộc tính để canh lề cho thành phần. margin: 0 auto là căn trên dưới 0, 2 bên auto, 2 bên auto thường để cho cái thành phần đó nằm vào giữa.
ví dụ mình có 2 thẻ

<div id="page">
    <div class="container"></div>
</div>
<style>
 #page {width: 100%; height: 100px; background: red}
.container {width: 50%; height: 80px; background: blue}
</style>

giờ bạn sẽ thấy thằng container nó nằm trong thằng page và chiều rộng của nó chỉ bằng 1 nửa. vì vậy vị trí của nó nếu k float gì sẽ nằm từ trái tới giữa thằng page là hết vùng của nó rồi. giờ nếu bạn muốn thằng container nằm giữa thằng page. căn đều 2 bên chứ không nằm lép sang 1 bên nữa bạn sẽ dùng margin: 0 auto;
bạn có thể cho code vào chạy thử để thấy cách nó hoạt động. chúc bạn học tốt.

[Trang_Tuan (Trang Tuân)]

với margin 4 giá trị: margin:5px 5px 5px 5px; tương đương margin: top right bottom left;
với margin 3 giá trị: margin: 5px 10px 15px; tương đương margin: top left/right bottom;
với margin 2 giá trị: margin: 5px 10px; tương đương margin: top/bottom left/right;
tương tự với padding.
vậy margin:0 auto có nghĩa là gì?
khoảng cách top với bottom là 0px
2 bên left right là auto
nếu bạn chỉ css đến đây thì vẫn chưa canh giữa được một khối block, muốn canh giữa một khối block thì định nghĩa thêm width của khối đó, ví dụ width: 200px; hoặc width: 80%;
còn nếu muốn canh giữa một khối nhưng không set width thì phải gán lại thuộc tính của div đó display:inline-block, sau đó chỉ cần set div cha là text-align:center; là được
demo online: https://codepen.io/anon/pen/KeKWBq