Khoảng cách giữa các ảnh trong HTML

4. Sử dụng font-size:

Cách này khá là hay và tiện. Ta sẽ gán font-size bằng 0 cho element cha của các inline-block elements.

HTML:nav {    font-size: 0;} nav a {    display: inline-block;    font-size: 15px;}

5. Cách cách xử lý khác:

Thay vì sử dụng inline-block để dóng các element theo hàng ngang thì ta hoàn toàn có thể sử dụng các cách tiếp cận đơn giản, hiệu quả và hiện đại hơn như sử dụng FlexBox hoặc đơn giản nhất là Float.

Vậy là chúng ta vừa tìm hiểu về một điều khá thú vị và kỳ quặc của thuộc tính inline-block trong css. Qua đây, mình hy vọng bài viết có thể giúp mọi người hiểu và biết được thêm các cách xử lý khi gặp phải tình huống trên.  

Khoảng cách "bí ẩn" giữa các "Inline-Block" Elements

• Báo cáo

Inline-block là một thuộc tính rất hữu ích đối với các anh em kỹ sư phần mềm, nhưng có một vấn đề về thuộc tính này mà không phải ai cũng biết, ngay cả với những người đã làm lâu năm. Đó chính là khoảng cách "bí ẩn" giữa các "Inline-Block" elements đứng cạnh nhau.

Kết quả:

2. Sử dụng margin:

Ta có thể áp dụng giá trị âm cho margin left hoặc right để "dấu" các khoảng trống không mong muốn đi.

CSS:nav a {    display: inline-block;    margin-right: -4px;}

3. Bỏ qua các thẻ đóng:

Bỏ qua các thẻ các thẻ đóng cũng sẽ giải quyết vấn đề này, nhưng có lẻ sẽ chẳng ai dùng nó đâu

.