在我們使用html過程中，有時候總是會出現一些莫名的空白間距，所有特此總結一下一些碰到的空白間距。
瀏覽器自身所帶的margin(外邊距)，padding(內邊距)所產生的空白：
在我沒有給div新增任何樣式的時候，div還是離上邊和左邊有空白間距，這個空白間距是瀏覽器自身所帶的8px的margin(外邊距)造成的。
解決的方法：可以在所寫的樣式裡面寫body或者引入重置檔案reset.css或者normalize.css都可以去除這種空白間距。
標籤與標籤之間因為換行或者空格導致的空白間距，主要還是出現在inline元素和inline-block元素
上圖我們可以清楚的看到每個span標籤之前有乙個小空格，原因是瀏覽器會把inline元素或inline-block元素間的空白字元（空格，回車）不管是乙個或者多個都會渲染成乙個空格。
解決的方法：
1.既然元素之間間距是因為標籤之間的（空格，回車）造成的，那麼我們在html中的標籤之間不留空格，那麼間距自然就取消了。
只要標籤與標籤之間沒有空格，空白間距都會消失，但是這種方法不贊成使用，因為操作麻煩，還有寫成一行也不利於**的閱讀，而且有使用文件美化的人，用了就還原了。
2.既然inline元素或inline-block元素間的空白字元才造成，那麼消除字元尺寸也可以消除空白間距。
在想要消除間距的元素的父元素裡寫font-size：0；讓空白字元的尺寸為了0，那麼空白字元也不見了，但是也要注意使用後記得把自身的元素的font-size寫上原來尺寸，要不然就會是一片空白。
3.這種方法跟第2種差不多，消除字元間隔，到達讓空白間距消失。
讓空白字元的字元間隔為-8px(不是固定，根據父元素的字型大小預設是多少可以改變，當字型尺寸過大時可以加大字元間隔負值)，從而到達消除空白間隔，也是要注意最後要在自身的元素上面寫上letter-spacing:0;，要不然自身元素的字會重疊。
主要是解決的空白間距，首先我們要了解img標籤是可替換標籤（標籤的具體顯示內容要根據其屬性來決定的標籤）可替換元素是可設定寬高的，但是img標籤卻是乙個行內元素，行內元素的預設對齊方式基線對齊，而img標籤的基線就是的底部，所以當沒有設定img父元素高度時，瀏覽器在渲染過程中，會預留4px空白，好讓img跟文字可以基線對齊。
既然這樣那麼改變對齊方式或者消除預留的空白就可以解決空白的間距問題。方法為：
1.因為img的父元素沒有給高度，父元素的高度完全取決於內容的高度，所有可以可以給父元素高度跟高度一樣
2.設定的對齊方式，可把vertical-align的值設定為top、middle、bottom等，只要不是baseline就ok。或者把img改變display屬性為block，塊元素沒有vertical-align屬性；
3.因為這個空間間隔是預留給文字基線對齊，那麼消除文字預設尺寸，也就是上面講的font-size：0；也能消除這個空白間隔，前提是這個方框裡沒有文字。
4.讓浮動，脫落文件流也不存在vertical-align屬性，但是注意要給父元素加overflow: hidden;避免因為浮動而導致父元素的高度塌陷。
大概遇到空白間距就是這些，如果有講的不對或不全的，歡迎大佬們指正和補充
html中一些居中的問題
居中的問題 一 不定寬的文字和等內聯元素居中 定義它的父元素 text align center 二 定寬塊狀元素居中 定義它的margin 0 auto 使它的margin left，margin right為auto 三 不定寬的塊狀元素 1.加入 table 標籤 在想居中的塊狀元素外面加入t...
html中一些莫名的空格
我們日常用編輯器編輯 的時候，為了讓 的可讀性更高，通常會有換行，空格或者tab鍵 bootstrap的規則中非常不建議這樣做，不過為了方便，我還是比較習慣這樣來縮排 的操作。1.textarea中的空格及空行 textarea為html中常見的雙標籤,textarea中的內容可以在初始化的時候直接...
HTML中一些實用標記記錄
在這篇文章中記錄我在學習html學習過程中，讓我感覺不錯的標籤。在網頁製作中，一般是通過各種標記對文字進行排版的。但在實際應用中，往往需要一些特殊的排版效果，這樣使用標記控制非常大的麻煩。解決方法就是使用原格式標記進行排版，如空格 製表符等.原格式標記 就可以解決這個問題。語法格式如下 文字內容 例...