CSS: Cho khung chữ dưới ảnh 10px

anon35998660 · September 29, 2020, 9:08pm

hi
mọi người ơi
mình đang muốn cho cái khung chữ dưới cách cái ảnh 10px, nhưng mà không được, mình có dùng top: 10px, nhưng cái khung cứ đứng im đó,
giúp tớ với

superthin · October 1, 2020, 2:02am

Nói đừng buồn nhé: bạn học rất hời hợt, mình thấy bạn đọc chưa kỹ lý thuyết, học theo kiểu học mót, góp nhặt sẽ không đi đến đâu cả. Và tiếng Anh dường như hơi lười. Hỏi mấy cái này thấy rất vụn vặt, ai giải thích cho xuể?

Ở câu hỏi này: bạn căn cứ vào đâu mà đặt top cho một tag có position là relative, hãy cho mình xem trang lý thuyết (mà bạn đã đọc) xem hay là bạn tự nghĩ ra? Chưa có căn bản thì làm ơn đừng có… sáng tạo.

Hãy đọc qua các giải thích, tự viết chán chê rồi mới xem ví dụ, đó là cách học tốt hơn là cứ vào xem ví dụ rồi chỉnh chọc khi mà trong não mình nó chưa kết nối nơ-ron.

hungaya · September 30, 2020, 12:32am

Bạn học lại box model đi. Nếu 2 boxes trong cùng 1 container được sắp xếp theo relative, thì CSS top property có nghĩa không?

Gợi ý là cách hoạt động CSS top không phục vụ được gì cho kiểu sắp xếp relative.

Duy_Hoang98 · September 30, 2020, 1:30am

html đơn giản như này thì dùng margin-top: 10px; là xong thui chứ xài position làm gì

anon35998660 · September 30, 2020, 2:23am

tôi đọc qua rồi nhé, trên trang họ cũng chỉ có viết thế thôi, bạn lên đó xem họ giải thích relative và static như nào.

ở relative họ chỉ nói việc setting thuộc tính trên , trái, dưới, phải của thẻ position được gán relative sẽ làm nó bị điều chỉnh so với vị trí thông thường của nó.
nội dung khác sẽ không bị để phù hợp bất kỳ khoảng trống nào do thẻ đó để lại.

anon35998660 · September 30, 2020, 2:06am

vì tôi nghĩ: nếu dùng margin-top: 10px thì nó cũng cách cái ảnh , nhưng nó cách so với cái mép lề trên chứ có phải cách cái ảnh đâu.

anon35998660 · September 30, 2020, 2:10am

mình có học Box model rồi, nó cũng chỉ ghi content, padding, border, và margin.
nhưng họ không nói cái margin là cách so với cái lề của màn hình, hay so với cái element gần nhất nó.

anon35998660 · September 30, 2020, 2:35am

ví dụ họ đưa thì đây: 1 cái khung chữ, set left=10px, thì cả cái khung thụt sang phải 10px.
có thể câu hỏi của Tôi bị ngáo ở đâu đó, vì đó là góc nhìn của Bạn vì bạn đã hiểu nó rồi, mà tôi hỏi theo suy nghĩ của tôi về lý thuyết đó, có thể tôi đã hiểu sai lý thuyết.

Duy_Hoang98 · September 30, 2020, 3:38am

không hiểu lắm, mép lề trên là cái gì bạn ? như html của bạn img xong đến div luôn thì đơn giản chỉ cần margin-top là đúng với yêu cầu của bạn rồi còn gì ? bạn dùng position: relative thì với html của bạn thẻ div nó sẽ cách top 10px nhưng tính từ thẻ body chứ không phải là cách img 10px nhé . với cả mình hay làm là nên bao các element cần chỉnh position vào trong 1 container có position: relative, các element con sẽ là postion: absolute thì mình mới nên dùng top, left, bottom, right

anon35998660 · September 30, 2020, 3:46am

nghĩa là ở đây, không có thẻ dùng làm container bọc thẻ ảnh và thẻ div, vì thế nó nhận thẻ body làm thẻ cha,
còn margin-top cho thẻ div là khoảng cách tính từ cái thẻ div tới cái thẻ body, mình hiểu vậy đúng ko ạ?

Huy_Huy14 · September 30, 2020, 8:55am

Bạn xem lại đi, cái khoảng trống nhỏ đó là nó cách 10px rồi chứ đòi gì nữa, ko có 10px là nó dính liền vô cái mép hình rồi

hungaya · September 30, 2020, 1:36pm

Bạn tham khảo về thuộc tính relative đúng rồi, mình ghi sai.

Lỗi không liên quan đến relative, lỗi nằm ở chỗ container của div là body. Thẻ body không có position property nên lấy position mặc định là static. Đối với static thì các thuộc tính top, left, bottom, right không có tác dụng. Code trên đặt position property nhầm thẻ, chỉ cần đi chuyển thuộc tính position từ thẻ div sang thẻ body là thẻ div cách ảnh liền.