首先我們需要了解的一些問題
1. img 元素是行內元素（儘管有時候表現的像行內塊級元素）。
2.vertical-align 屬性是設定元素的垂直對齊方式（定義了行內元素的基線-baseline相對於該元素所在行的基線的垂直對齊）。
vertical-align的預設值為baseline，元素放置在父元素的基線上。
vertical-align：top ，把元素的頂端和行內最高元素的頂端對齊。
vertical-align： bottom，把元素的頂端和行內最低元素的頂端對齊。
3.line-height 為行內元素top和botttom之間的值。line-height的預設值是基於fontsize。
4.只要是inline的，即使沒有文字，baseline和bottom之間的留白區域也會預設存在。
解決方法：
1）直接設定vertical的值，這種方法對於行內有文字的情況比較有利。
2）設定line-height的值為0，top和bottom之間的值為0，baseline和bottom之間的值自然為0.這種方法是用於行內沒有其他元素，且有line-height屬性的時候。如果沒有設定line-height屬性，可以通過font-size：0來消除空白。
（比如css中font:12px/1.5,line-height是字型高度的1.5倍，font-size為0時，line-height自然為0
）3）當然也可以直接設定img
底部留白問題導致排版混亂
img底部留白問題 charset utf 8 title type text css box box h2 box h2 a box h2 a hover box banner box banner a box banner a tit box banner a hover tit box ban...
h5底部留白，適配iphoneX安全區域
參考文章 在meta標籤中設定viewport fit covername viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no,viewp...
網頁設計中的留白
在設計中，留白並非只是說在畫面中留出一塊白色或者某個顏色，留白的真正含義其實是指留出空間感，去除多餘的裝飾，簡化畫面，使整體看起來是簡約的。留出空間感，留白可以使畫面的空間感大大的增強，留的白越多，主體就越突出。如下圖，我相信每個人第一眼看到的都會是那個人和柱子的存在，這就是留出空間感的意義 留出呼...