Giá trị của thuộc tính nói trên được điều chỉnh tự động theo nội dung hoặc bối cảnh của phần tử.
Ví dụ: phần tử cấp khối có height: auto sẽ phát triển cao hơn vì nó chứa nhiều văn bản hơn. Ví dụ khác, một phần tử khối có margin: 0 auto sẽ có lề trái và lề phải tăng cho đến khi nó trở thành trung tâm dọc theo trục y của chế độ xem.
Nó thực sự phụ thuộc vào thuộc tính bạn đưa ra giá trị, các thuộc tính khác nhau hoạt động khác nhau tùy thuộc vào nội dung và bối cảnh.
tự động có nghĩa là tự động được quảng cáo. Lý do phổ biến nhất tôi sử dụng tự động là:
margin: 0 auto;để tập trung một yếu tố.
Xin lưu ý: nếu kích thước không được khai báo, thì nó sẽ không hoạt động.
Ví dụ 1: div không phải là trung tâm, tự động không hoạt động
<style> .cont { margin: 0 auto; } </style> <div class="cont"></div>Ví dụ 2: div được căn giữa trang
<style> .cont { width: 1000px; margin: 0 auto; } </style> <div class="cont"></div>Nó thực sự phụ thuộc vào thuộc tính mà bạn sử dụng. Ví dụ: tự động đặt chiều rộng khối sẽ mở rộng toàn bộ không gian của phần tử cha của anh ấy. Nhưng tự động đặt chiều cao khối sẽ chỉ mở rộng không gian cần thiết cho nội dung của anh ấy.
<style> #outer{ width: 500px; height: 500px; border: solid 2px black; } #inner{ width: auto; height: auto; background-color: aqua; } </style> <div id="outer"> <div id="inner">content</div> </div>