Lỗi css element đè lên nhau

[bbongcaixanh (Lê Dũng)]

mình mới học css, nhờ mn nói qua cách đẩy phần chữ lên trên với

[superthin (Vô Thin)]

Không đọc được code của bạn nên chịu chết, không biết hiện nay cái Come and you be… hiện đang nằm trong thẻ gì, thẻ cha của nó là gì, position như thế nào.

Vì thế, bạn copy đoạn HTML của bạn vào hoặc đưa lên codepen.io có cả HTML, CSS để mọi người trợ giúp.

Về nguyên tắc để né một phần từ khỏi phần từ khác bên dưới nó thì hoặc nó có margin-bottom: 2em; hoặc phần tử ngay sau nó có margin-top: 2em; (đơn vị thì tự thay vào 2em bằng đơn vị của bạn). Còn nếu phần tử cần chỉnh đang bị vướng/ dính với các phần tử hàng cha chú của nó bởi phần tử cha của nó thì chỉnh phần tử cha trước.

Cực đoan nhất (theo kiểu code trâu khi chưa tìm ra cách nào đẹp hơn) đó là chơi kiểu ngày xưa: chèn hình gif trong suốt vào để tạo khoảng trắng, hoặc dùng table để dễ layout .

[bbongcaixanh (Lê Dũng)]

vâng em cảm ơn anh .phần chữ đấy tức section content là 1 khối, còn phần 4 ô vuông dưới là 1 section item. em bị lỗi magin-bottom. nhưng do em ko chỉnh margin mà lại chỉnh padding cả trên lẫn dưới nên ko đc. vậy cho em hỏi luôn là khi mình code thì chỉ cần margin-bottom/-top hay cả 2 ạ

[superthin (Vô Thin)]

Mình cũng từng rất bối rối về cái margin, padding này trong 1 thời gian vì đọc trên mạng mà vẫn không hiểu. Một hôm đi tham gia tranh chấp đất (tham gia cho vui chứ mình không có quyền lợi ở bên nào) bỗng nhiên mình sáng tỏ về margin, padding. Giờ giải thích lại cho bạn rõ hen. Chú ý: từ element đôi lúc mình dịch ra tiếng Việt là đối tượng, lúc khác lại là phần tử, đều chính hắn.

• Đất ông A (<section id="ong-a"></section>) nằm phía trên đất bà B (<section id="ba-b"></section>). Mặc định, ông A, bà B sẽ có chung hàng rào, lúc này margin-bottom của ông A = 0; margin-top của bà B = 0

• Hai người ở cạnh nhau, không mâu thuẫn gì, thậm chí ông A và bà B ở vào trạng thái “người yêu cũ” của nhau nên vợ ông A ngày nào cũng phàn nàn vì ông A cứ hay nhìn sang nhà bà B. Vì thế, ông A đã nhổ hàng rào của mình lùi lên 1 mét đất margin-bottom: 1em để không còn gần đất bà B nữa, để mụ vợ bớt càm ràm.

• Bà B có 3 người con, bả chia đất cho mấy đứa con và cấm mấy đứa con cãi lộn nhau khi có vợ có chồng nên bả chỉ cho mượn đất sử dụng chứ hổng cho luôn, chừng nào chết thì tình sau. Vì thế bả cấm con cái dựng nhà sát ranh giới mà phải thụt vào nửa mét so với mảnh đất lớn của bả, và mỗi đứa cách nhau nửa mét.

Hy vọng với bài viết lủng củng trên có thể giúp bạn hiểu rõ thêm phần nào về margin và padding.

Tóm lại: margin là của đối tượng A so với đối tượng B, C, D ngang hàng/ bên ngoài nó, còn padding là nó A đối với các đối tượng element con nó a’, a’’, a’’’ mà thôi. Nhưng cẩn thận với trường hợp của thẻ p và h1 đến h6, có lúc nó tuy là element con nhưng làm lộn xộn element bố mẹ của nó. Cho nên, những gã trai viết CSS bắt đầu say xỉn cuối tuần, đi loạng choạng ngoài đường và giở trò yêu râu xanh với 2 em gái: Reset CSS và Normalize.css.