Tự động làm gì trong lề: 0 tự động?

Question

auto làm gì trong margin:0 auto;?

Tôi dường như không thể hiểu được những gì auto thực hiện. Tôi biết nó đôi khi có tác dụng làm trung tâm đối tượng. Cảm ơn.

Answer 1

Khi bạn đã chỉ định width trên đối tượng mà bạn đã áp dụng margin: 0 auto cho, đối tượng sẽ nằm ở giữa trong vùng chứa chính.

Chỉ định auto làm thông số thứ hai về cơ bản cho trình duyệt tự động xác định lề trái và lề phải bằng cách đặt chúng bằng nhau. Nó đảm bảo rằng lề trái và phải sẽ được đặt ở cùng kích thước. Tham số đầu tiên 0 cho biết bên lề trên và dưới cả hai sẽ được thiết lập để 0.

margin-top:0; 
margin-bottom:0; 
margin-left:auto; 
margin-right:auto; 

Vì vậy, để cung cấp cho bạn một ví dụ , nếu phụ huynh là 100px và đứa trẻ là 50px, sau đó các auto bất động sản sẽ xác định rằng có 50px không gian miễn phí để chia sẻ giữa margin-left và margin-right:

var freeSpace = 100 - 50; 
var equalShare = freeSpace/2; 

nào sẽ cung cấp cho:

margin-left:25; 
margin-right:25; 

Hãy xem số jsFiddle này. Bạn không phải chỉ định chiều rộng của cha, chỉ chiều rộng của đối tượng con.

Answer 2

tự động: Trình duyệt đặt lề. Kết quả của việc này là phụ thuộc vào trình duyệt

margin: 0 auto định

* top and bottom margins are 0 
* right and left margins are auto 

Answer 3

Từ đặc điểm kỹ thuật CSS trên Calculating widths and margins for Block-level, non-replaced elements in normal flow:

Nếu cả hai 'margin-left' và 'margin-right 'là' tự động ', giá trị được sử dụng của chúng bằng nhau. Điều này theo chiều ngang trung tâm phần tử đối với các cạnh của khối chứa.

Answer 4

margin:0 auto; 

0 là dành cho top-bottom và auto cho trái bên phải. Điều đó có nghĩa là lề trái và phải sẽ lấy lề tự động theo chiều rộng của phần tử và chiều rộng của vùng chứa.

Nói chung nếu bạn muốn đặt bất kỳ phần tử nào ở vị trí trung tâm thì margin:auto hoạt động hoàn hảo. Nhưng nó chỉ hoạt động trong các phần tử khối.

Answer 5

margin-top:0; 
margin-bottom:0; 
margin-left:auto; 
margin-right:auto; 

0 là từ trên xuống và tự động cho trái-phải. Trình duyệt đặt lề.