30/09/2018, 19:23
[HTML/CSS]Hỏi về thuộc tính margin trong css
Mình có đoạn code này:
http://codepad.org/IJJn3V49
Mình cho thẻ div màu blue nằm bên trong thẻ div màu green.
Cái thẻ div màu blue mình cho 2 thuộc tính margin-left:10px và margin-top:100px thì thuộc tính margin-left mình thấy nó căn theo.thẻ div màu green còn thuộc tính margin-top thì nó căn theo phía trên trình duyệt. Còn nếu mình thêm thuộc tính border vào thẻ div green thì margin-top lại căn theo thẻ div màu green. Mình không hiểu rõ chỗ này mọi người giải đáp thắc mắc giúp mình với.
Bài liên quan
the DIV BLUE cho position: relative
DIV GREEN cho position: relative
thử xem.
Bạn đọc qua bài viết này sẽ hiểu tại sao
http://www.w3schools.com/css/css_boxmodel.asp
Khi bạn set border hoặc padding cho thẻ green thì nó sẽ trở thành một cái khung và dĩ nhiên margin của thẻ con blue sẽ ăn theo thẻ green. Còn nếu không set border, padding cho green thì nó dĩ nhiên giống như một mặt phẳng trống trơn không có gì để giữ thằng con bên trong lại. Kết quả là margin của thẻ blue sẽ ăn theo cửa số trình duyệt chứ không theo thằng cha green.
Cái này gọi là margin collapse, áp dụng lên margin top hoặc bottom của các block element không float hay absolute position. Khi 2 element gần nhau thì margin của chúng hợp làm 1 (lấy giá trị margin lớn hơn). Hoặc margin của element con sẽ trờ thành margin của element cha.
Cảm ơn các bạn mình hiểu rồi