當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

051_元素之间空白间隙解决方案

發布時間：2025/5/22 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 051_元素之间空白间隙解决方案小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 元素li和li之間, 以及多個圖片直接會有一段空白的, 空白符會造成元素顯示有間隙。消除間隙就不能有空白符。不留空白代碼格式又顯得糟糕。

2. 我們有消除間隙小竅門, 在元素的父容器中設置: font-size: 0;?也可以消除間隙的哦。

3. 例子

3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>元素之間空白間隙解決方案</title><style type="text/css">* {margin: 0;padding: 0;}.site-doc-icon { background: #F0FFF0;}.site-doc-icon li {width: 240px; height: 60px; display: inline-block; border: 1px solid #e2e2e2; line-height: 60px;font-size: 16px;text-align: center; }.font-size0 li { margin-right: -1px; margin-bottom: -1px;}img { width: 426px; height: 172px; }</style></head><body><ul class="site-doc-icon" style="width: 983px;"><li>元素li和li之間是有一段空白的。</li><li>空白符會造成元素顯示有間隙。</li><li>消除間隙就不能有空白符。</li><li>不留空白代碼格式又顯得糟糕。</li><li>我們有消除間隙小竅門。</li><li>在元素的父容器中設置:</li><li>font-size: 0;</li><li>也可以消除間隙的哦。</li></ul><div><img src="bg1.png" alt="bg1" /><img src="bg2.png" alt="bg2" /><img src="bg3.png" alt="bg3" /></div><ul class="site-doc-icon font-size0" style="font-size: 0; width: 965px; margin-top: 30px;"><li>元素li和li之間是有一段空白的。</li><li>空白符會造成元素顯示有間隙。</li><li>消除間隙就不能有空白符。</li><li>不留空白代碼格式又顯得糟糕。</li><li>我們有消除間隙小竅門。</li><li>在元素的父容器中設置:</li><li>font-size: 0;</li><li>也可以消除間隙的哦。</li></ul><div style="font-size: 0;"><img src="bg1.png" alt="bg1" /><img src="bg2.png" alt="bg2" /><img src="bg3.png" alt="bg3" /></div></body> </html>

3.2. 效果圖

總結

以上是生活随笔為你收集整理的051_元素之间空白间隙解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。