至今我還記得年輕是在ie6www.cppcns.com上開發的那些苦逼日子,特別希望ie瀏覽器採用 inline-block 的顯示方式.
行內塊(inline-程式設計客棧block)是非常有用的,特別是想要不用'block'和'float'來控制這些行內元素的margin,padding之時。
問題來了,html原始碼中行內元素之間的空白有時候顯示在螢幕上那是相當的討厭。
當然,有一些技巧(方法)www.cppcns.com可以用來清除他們:比如粗暴地完全刪除空白,或者其他的方法:
解決方案1: font-size:0;
最好的方法是在外層元素上設定font-size:0;同時在內層元素上指定字型具體的大小。
複製**
**如下:
ul.inline-block-list
ul.inline-block-list li
為了抵消外層元素的字型屬性,在內層元素必須指定 font-size 屬性，當然這很簡單。
假若**是一種複雜的巢狀關係，那麼你可能不好去計算或指定這些字型屬性,但在大多數情況下,這就是你想要的效果！
解決方案2: html 注釋
這種方法比較渣,但是效果也不錯。rgjkl使用html的注釋標記頂替元素之間的空白:
複製**
**如下:
乙個字來形容: 渣.如果用2個字來形容，那就是"渣渣",用3個字來形容,"解決了"。
解決方案3: 指定margin屬性值為負數
和方案2類似，這個也比較渣。可以使用行內元素的margin屬性來抵消空白:
複製**
**如下:
ul.inline-block-list li
這是最糟糕的解決方案了,因為你必須根據具體情況去計算,有時候還不對。你應該盡量避免這程式設計客棧樣做。
雖然這些方案都不是很理想,但是如果不這樣處理，那你的html**結構可能就非常混亂，成為標準的垃圾**。
因為行內元素非常好用,所以這並不是乙個小心避免的雷區,作為開發人員,學會處理這種空白問題也是很重要的。
本文標題: 清除行內元素之間html空白的幾種解決方案
本文位址:
清除行內元素之間的HTML空白
原文連線 remove whitespace between inline block elements 原文日期 2013年8月27日 翻譯日期 2013年8月28日 至今我還記得年輕是在ie6上開發的那些苦逼日子,特別希望ie瀏覽器採用 inline block 的顯示方式.行內塊 inline...
css中行內元素和行內塊元素空白間隙的問題
在html 中，如果把行內元素或者行內塊元素寫成下面這樣的話，會出現空格的問題 class 我是行內元素span 我是行內元素span 我是行內元素span div 效果圖 我麼可以看到，這裡保留了乙個空格，之所以出現先這個問題，在於 我們 裡面的這幾個span 標籤都有換行，這些換行也叫作空文字節...
行內塊元素的空白符問題
資源收集 前端開發,css 在前端開發中，將幾個有固定寬高的盒子並列排布是極為常見的頁面效果，實現這個效果的方式有很多，諸如定位，浮動，彈性盒，行內塊元素等等，每個方法都有著其獨特的優點和缺點，今天我們這裡就來討論討論使用行內塊元素來實現並列排列的優缺點 首先我們先建立乙個大盒子並在其中再建立三個小...