Trung tâm tự động CSS lề có lề trên - VALID?

Question

Đây có phải là CSS hợp lệ để căn giữa div và cũng áp dụng lề trên không?

div { 
    margin: 0 auto; 
    margin-top: 30px; 
    } 

Answer 1

Sử dụng sau đây để xác định lợi nhuận:

div { margin: 30px auto 0; } 

Đó là viết tắt cho:

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */ 

Đó là viết tắt cho:

div { 
    margin-top: 30px; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
} 

Bây giờ bạn biết các cách khác nhau margin s, và/hoặc padding, có thể được chỉ định; sự lựa chọn là của bạn.

Khi ưu tiên được ưu tiên, định nghĩa sau sẽ được áp dụng; như được định nghĩa trong the spec.

Để tìm giá trị cho một sự kết hợp yếu tố/bất động sản, đại lý sử dụng phải áp dụng trình tự sắp xếp như sau:

1. Tìm tất cả các tờ khai áp dụng cho các phần tử và sở hữu trong câu hỏi, cho các loại phương tiện truyền thông mục tiêu . Các khai báo sẽ áp dụng nếu bộ chọn liên kết khớp với phần tử được đề cập.
2. Loại chính của các khai báo là theo trọng lượng và nguồn gốc: đối với các khai báo thông thường, các tờ định kiểu tác giả ghi đè các tờ kiểu người dùng ghi đè lên biểu định kiểu mặc định. Đối với các khai báo "! Quan trọng", tờ định kiểu người dùng ghi đè các mẫu kiểu tác giả ghi đè lên biểu định kiểu mặc định. Tuyên bố "quan trọng" ghi đè lên các khai báo thông thường. Một biểu định kiểu được nhập có cùng nguồn gốc với biểu định kiểu đã nhập nó.
3. Loại thứ hai là theo độ đặc hiệu của công cụ chọn: các công cụ chọn cụ thể hơn sẽ ghi đè các công cụ tìm kiếm chung hơn. Các phần tử giả và các lớp giả được tính là các phần tử và các lớp thông thường, tương ứng.
4. Cuối cùng, sắp xếp theo thứ tự được chỉ định: nếu hai quy tắc có cùng trọng số, nguồn gốc và độ đặc hiệu, thì quy tắc sau sẽ thắng. Các quy tắc trong các bảng định kiểu được nhập được coi là trước bất kỳ quy tắc nào trong bản định kiểu.

Ngoài cài đặt "! Quan trọng" trên khai báo riêng lẻ, chiến lược này cung cấp bảng định kiểu của tác giả cao hơn trọng lượng của người đọc. Do đó, điều quan trọng là tác nhân người dùng cung cấp cho người dùng khả năng tắt ảnh hưởng của một biểu định kiểu nhất định, ví dụ: thông qua trình đơn kéo xuống.

Như những người khác đã đề cập, bạn có thể sẽ cần phải xác định một chiều rộng cố định để xem div bạn làm trung tâm ...

Answer 2

Tôi không thấy lý do tại sao không ... bạn cũng có thể rút ngắn này để:

div {margin: 30px auto 0;}

Answer 3

có, nhưng liên quan đến trung div bạn cũng sẽ muốn áp dụng width với nó.

Answer 4

Đó là hợp lệ, nhưng nó có thể ngắn hơn như thế này:

div {margin: 30px auto 0;}

Khi bạn chỉ cung cấp cho ba giá trị, giá trị trung được áp dụng cho cả hai bên trái và phải.

Answer 5

có, bởi vì lề: 0 tự động được thiết lập trên cùng và dưới cùng là 0 và trái và phải để tự động để thiết lập đầu đến 30px chỉ giống như nói margin: 30px auto 0 auto;

Answer 6

Có, nó hợp lệ. margin-top sẽ ghi đè quy tắc margin.

Mặc dù bạn có thể muốn thêm width để căn giữa nó.

Answer 7

Có. Và họ nói đúng:

div { width: 90%; margin : 30px auto 0 auto; } 

Tôi thường sử dụng 90% chiều rộng như là một điểm khởi đầu tốt.