當前位置：
首頁 >
051_元素之间空白间隙解决方案
發布時間：2025/5/22
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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_元素之间空白间隙解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 024_输入输出字符集
- 下一篇： 038_Unicode对照表四