我們先來看一段**
*
.myspan1
.myspan2
>
class
="myspan1"
>
我是span1span
>
class
="myspan2"
>
我是span2span
>
div>
執行效果如下圖所示
可以看到，在清除了預設的 margin 和 padding 後，兩個 span 元素之間依然產生了間距。
這個間距是在源**中換行導致的，即原始碼中兩個 span 元素換行形成的。
源**內換行產生的換行符，會被瀏覽器解析為乙個空格，在渲染的時候，會產生乙個縫隙。實際上我們並不需要它。
(1) 源**內同行顯示的標籤不換行(不推薦)
既然間距是因為換行引起的，那麼，我們在書寫源**時，只要是同行顯示的標籤我們都不換行，就可以解決這個問題：
>
class
="myspan1"
>
我是span1span
>
class
="myspan2"
>
我是span2span
>
div>
效果如下
間距雖然消失了，但有乙個嚴重的問題。我們寫**不換行，會導致**的可讀性大大降低，**結構不清晰。所以這個方案並不適合在實際情況中解決。
(2) 使用浮動(不推薦)
浮動的元素會脫離標準文件流，這個問題自然迎刃而解。
*
.myspan2
>
class
="myspan1"
>
我是span1span
>
class
="myspan2"
>
我是span2span
>
div>
效果如下
間距消失了，但是這個方法同樣會帶來比較麻煩的問題。
首先，每次浮動之後，都需要清除浮動，否則就會影響其後的元素的布局，這大大增加了**的體積，也讓結構變得更加複雜，大量的浮動，又大量的清除浮動，對資源的消耗也很大。
其次，當頁面縮放時，當寬度不夠放下浮動元素時，浮動元素會自動換行，這將導致布局紊亂。
(3) 使用定位(不使用)
定位解決問題的原理和浮動一樣，讓元素脫離文件流。但是可行性比浮動更差，這裡不做演示。
使用定位之後元素的位置就固定了，如果這些元素的內容改變了，就會出現大量的間距或者發生大量的重疊部分。
(4) 為父級元素設定word-spacing為合適的負值
這個方法的原理很簡單，瀏覽器識別乙個單詞的依據是空格。
行內顯示的元素和單詞一樣，瀏覽器會認為空格前後是兩個不同的單詞。於是，我們只要調整詞間距為適當的負值，就可以實現去掉這個間距。**如下
*.mydiv
.myspan1
.myspan2
class
="mydiv"
>
class
="myspan1"
>
我是span1span
>
class
="myspan2"
>
我是span2span
>
div>
效果如下
依然有效，但是也有乙個問題。單詞間距的大小是根據字型大小而定的。只要頁面的字型改變了，就會出現重疊現象，或者出現新的縫隙
在上面的基礎上，我把 body 的字型設定為 30px，效果如下
出現了新的間距。因為隨著字型的變大，空格也跟著變大了
這個問題也很好解決，為父級元素設定乙個固定的字型大小，配合詞間距 word-spacing 一起使用，就可以實現。
(5) 為父級元素設定 font-size 為 0
這個方法的原理和詞間距一樣，既然空格是隨著字型大小一起改變的，那我讓字型大小為 0，間距就自己消失了
但是間距消失了，字型大小也為 0 了，所以為父級設定 font-size 為 0 的同時，元素本身需要重新設定合適的字型大小。
*
.myspan1
.myspan2
class
="mydiv"
>
class
="myspan1"
>
我是span1span
>
class
="myspan2"
>
我是span2span
>
div>
效果如下圖所示
這個方法的缺點在於，每個子元素都需要設定一遍字型大小，這增加了 css **的體積。這既是缺點也是優點，好處就是子元素的字型可以隨意改變，不論多大或多小，都不會影響
在上面的基礎上我把兩個 span 元素的字型放大到 30px，效果如下
html設計時 img與元素存在間距的處理
在學習開發筆書奇 時，遇到一下問題 問題點 在初始化css中設定了img的padding和margin為0，可是在插入img後，img與父元素仍然有一定間距。原因分析 文字等inline元素預設與父級元素的baseline對齊，而baseline與父級元素底部是有一定距離的 這個與font size...
去除inline block元素間間距的N種方法
一 現象描述 真正意義上的inline block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距，很簡單的個例子 間距就來了 我們使用css更改非inline block水平元素為inline block水平，也會有該問題 space a 惆悵 淡定熱血 您可以狠狠地點選這裡 inline b...
HTML元素的預設樣式
為什麼需要預設樣式？在html發展初期，還沒有css檔案，另外，css檔案可能不能載入，所以這裡預設樣式就是必要的。預設樣式帶來的問題，會影響我們寫css，需要我們覆蓋預設樣式。還有一些預設樣式是很難覆蓋的，比如下拉框的預設樣式，是很難去覆蓋的。demo2 7.html div元素 既然元素預設樣式...