Có gì xảy ra ở đây?Chèn đệm CSS ghi đè tràn?
#agendaTitle{
margin:0;
padding:20em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
Đệm trên cao là rất cao chỉ để chứng minh - với yêu cầu thực tế div vẫn tăng chiều cao tương ứng.
Chắc chắn overflow:hidden có nghĩa là tôi sẽ chỉ thấy một khối màu? Xảy ra trong FF và IE
Trong mô hình hộp mặc định content-box trên một yếu tố display: block, padding và height được thêm vào với nhau để xác định tổng chiều cao của phần tử. overflow chỉ ảnh hưởng đến những thứ bên ngoài hộp (ngoài chiều cao + đệm + đường viền).
Nếu bạn muốn lề và lề được trừ từ chiều cao được chỉ định thay vì được thêm, hãy sử dụng box-sizing: border-box.
Tôi ngạc nhiên khi biết bao nhiêu năm tôi không biết là kích thước hộp tăng lên. Thực sự tôi hoàn toàn ngạc nhiên. Dù sao là hầu hết các câu trả lời khác là đúng, đây là lần đầu tiên được đăng – Datadimension
@TimHigham Cảm ơn! Trên thực tế, các phiên bản cũ của IE sử dụng mô hình hộp kiểu hộp biên, trong đó đệm và đường viền được trừ từ chiều cao thay vì được thêm vào nó như trong hộp mô hình hộp nội dung CSS mặc định 'content-box'. Họ không thêm hỗ trợ cho mô hình 'content-box' tuân thủ chuẩn cho đến IE6, và thậm chí sau đó nó không được mặc định! – Ennui
IE - bạn có thích nó không !!! – Datadimension
Giống như
css này
*{
margin:0;
padding:0;
}
#agendaTitle{
margin:0;
padding:0.75em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
Bạn đã thiết lập chiều cao để 3em, vì vậy nó sẽ hiển thị chiều cao cuối cùng của (3em + 20em).
Và tràn sẽ chỉ giới hạn chiều cao tức là 3em.
Bạn đang hỏi gì? Cố gắng giải thích tốt hơn và đăng lên JSFiddle. – Ennui
Giả sử bạn đang sử dụng mô hình hộp mặc định (hộp nội dung) sẽ hiển thị dưới dạng khối màu rắn cao 23em (giả sử nó là một phần tử 'div' hoặc' display: block' khác). padding được thêm vào chiều cao và không ai trong số họ là 'bên ngoài' hộp hoặc sẽ bị ẩn bởi tràn. Nếu bạn muốn padding trừ đi chiều cao thay vì được thêm vào nó, sử dụng 'box-sizing: border-box'. – Ennui