Làm thế nào để làm đệm: tự động làm việc trong CSS?

Question

Tôi đang làm việc trên một dự án kế thừa đã đặt lại CSS với *{ margin:0; padding:0 } áp dụng cho mọi thứ. Bây giờ, mã mới của tôi không cần nó vì nó dựa trên Normalize.css. Điều này đã không được nhiều của một vấn đề nhưng ở một số nơi tôi cần phải sử dụng cả hai phong cách.

Tôi làm cách nào để hủy đặt lại CSS của mình? Tôi đã có thể làm *{margin:auto} hoạt động tốt. Điều này cũng không đúng về padding. Có một cách tương đương để thiết lập lại padding. Làm thế nào để bạn đi về giải quyết này?

Answer 1

auto không phải là một giá trị hợp lệ cho padding bất động sản, điều duy nhất bạn có thể làm là đưa ra padding: 0; từ việc kê khai *, nếu không chỉ đơn giản là gán padding đến khối tài sản tương ứng.

Nếu bạn loại bỏ padding: 0; từ * {} hơn trình duyệt sẽ áp dụng kiểu mặc định các yếu tố của bạn mà sẽ cung cấp cho bạn offsets vị trình duyệt chéo bất ngờ bởi vài điểm ảnh, vì vậy nó là tốt hơn để gán padding: 0; sử dụng * và hơn nếu bạn muốn ghi đè lên các đệm , chỉ cần sử dụng một quy tắc khác như

.container p { 
    padding: 5px; 
} 

Answer 2

Bạn chỉ cần phạm vi bộ chọn * của mình cho các khu vực cụ thể cần đặt lại. .legacy * { } vv

Answer 3

Các giải pháp hỗ trợ đơn giản nhất là sử dụng một trong hai lề

.element { 
    display: block; 
    margin: 0px auto; 
} 

Hoặc sử dụng một container thứ hai xung quanh phần tử có biên độ này được áp dụng. Điều này phần nào sẽ có tác dụng của padding: 0px auto nếu nó đã tồn tại.

CSS

.element_wrapper { 
    display: block; 
    margin: 0px auto; 
} 
.element { 
    background: blue; 
} 

HTML

<div class="element_wrapper"> 
    <div class="element"> 
    Hello world 
    </div> 
</div>