为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose
<a style="border:1px solid red;margin:0;padding:0;" id="nana" href="#"><img src="/static/imghw/default1.png" data-src="Images/%e5%a8%9c%e5%a8%9c.jpg" class="lazy" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a>
如上的代码，图片最下方并不是紧贴着a标签下边界的，会有一条缝隙，这是为什么呢？
a标签和img标签都是内联元素，我试了下，如果把a标签和img标签都设置成block，两个元素就会完全重合，如果只给a标签设置block，img图片下方和a标签下边界同样还是会有一条缝隙，还是搞不懂为什么，求大神解答！
回复讨论(解决方案)
可能没有完整的reset导致的。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} </style></head><body><a style="max-width:90%" id="nana" href="#"><img src="/static/imghw/default1.png" data-src="Images/%e5%a8%9c%e5%a8%9c.jpg" class="lazy" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>
可能没有完整的reset导致的。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} </style></head><body><a style="max-width:90%" id="nana" href="#"><img src="/static/imghw/default1.png" data-src="Images/%e5%a8%9c%e5%a8%9c.jpg" class="lazy" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>还是一样额，还是有空隙的
我少写了个：img{vertical-align:middle;}
拷贝到本地运行看看。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} img{vertical-align:middle;} .link{ display:inline-block; *display:inline; *zoom:1;} </style></head><body><a class="link" style="max-width:90%" id="nana" href="#"><img src="/static/imghw/default1.png" data-src="http://dummyimage.com/600x400/" class="lazy" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>
可能没有完整的reset导致的。
<!doctype html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} </style></head><body><a style="max-width:90%" id="nana" href="#"><img src="/static/imghw/default1.png" data-src="Images/%e5%a8%9c%e5%a8%9c.jpg" class="lazy" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a></body></html>完全??
<a style="max-width:90%" id="nana" href="#"><img src="/static/imghw/default1.png" data-src="Images/%e5%a8%9c%e5%a8%9c.jpg" class="lazy" / alt="为什么在a标签中添加一张图片，图片下方和a标签的边界会有一些空隙？_html/css_WEB-ITnose" ></a>
如上的代码，图片最下方并不是紧贴着a标签下边界的，会有一条缝隙，这是为什么呢？
a标签和img标签都是内联元素，我试了下，如果把a标签和img标签都设置成block，两个元素就会完全重合，如果只给a标签设置block，img图片下方和a标签下边界同样还是会有一条缝隙，还是搞不懂为什么，求大神解答！
?空隙是?很?典的??，
原因其?非常的基本，
因??初?立??的不是?洲而是?洲，
inline 元素?了正?的?示英文字母像是 y j g ?有尾巴的
?在底下留空，?要依? font-size 去?定
?主如果a??任何文字，font-size可以?定? 0
?充：
?然??片的vertical-align 指定?非baseline也能解???
但?人是不建?，依???，?IE版在文字垂直置中有著「不一?的解?」
竟然是因为英文字母的尾巴，，，多谢楼上两位大神~
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？
Mar 22, 2024 am 08:06 AM
隨著社群媒體的不斷發展，小紅書已經成為越來越多年輕人分享生活、發現美好事物的平台。許多用戶在發布圖片時遇到了自動儲存的問題，這讓他們感到十分困擾。那麼，如何解決這個問題呢？一、小紅書發布自動儲存圖片怎麼解決？ 1.清除快取首先，我們可以嘗試清除小紅書的快取資料。步驟如下：（1）開啟小紅書，點選右下角的「我的」按鈕；（2）在個人中心頁面，找到「設定」並點選；（3）向下捲動，找到「清除快取」選項，點擊確認。清除快取後，重新進入小紅書，嘗試發布圖片看是否解決了自動儲存的問題。 2.更新小紅書版本確保你的小
抖音評論裡怎麼發圖片？評論區圖片入口在哪裡？
Mar 21, 2024 pm 09:12 PM
隨著抖音短影片的火爆，用戶們在留言區互動變得更加豐富多彩。有些用戶希望在評論中分享圖片，以便更好地表達自己的觀點或情感。那麼，抖音評論裡怎麼發圖片呢？本文將為你詳細解答這個問題，並為你提供一些相關的技巧和注意事項。一、抖音評論裡怎麼發圖片？ 1.開啟抖音：首先，你需要開啟抖音APP，並登入你的帳號。 2.找到評論區：瀏覽或發布短影片時，找到想要評論的地方，點擊「評論」按鈕。 3.輸入評論內容：在留言區輸入你的評論內容。 4.選擇傳送圖片：在輸入評論內容的介面，你會看到一個「圖片」按鈕或「+」號按鈕，點
ppt怎麼讓圖片一張一張出來
Mar 25, 2024 pm 04:00 PM
在PowerPoint中，讓圖片逐一顯示是常用的技巧，可以透過設定動畫效果來實現。本指南詳細介紹了實現此技巧的步驟，包括基本設定、圖片插入、新增動畫、調整動畫順序和時間。此外，還提供了進階設定和調整，例如使用觸發器、調整動畫速度和順序，以及預覽動畫效果。透過遵循這些步驟和技巧，使用者可以輕鬆地在PowerPoint中設定圖片逐一出現，從而提升簡報的視覺效果並吸引觀眾的注意力。
如何使用HTML、CSS和jQuery實現圖片合併展示的進階功能
Oct 27, 2023 pm 04:36 PM
如何使用HTML、CSS和jQuery實現圖片合併展示的高級功能概述:在網頁設計中，圖片展示是一個重要的環節，而圖片合併展示是提高頁面加載速度和提升用戶體驗的常用技巧之一。本文將介紹如何使用HTML、CSS和jQuery來實現圖片合併展示的進階功能，並提供具體的程式碼範例。一、HTML佈局:首先，我們需要在HTML中建立一個容器來展示合併後的圖片。可以使用di
在 iPhone 上讓圖片更清晰的 6 種方法
Mar 04, 2024 pm 06:25 PM
Apple最近的iPhone可以透過清晰的細節、飽和度和亮度來捕捉回憶。但有時，您可能會遇到一些問題，這些問題可能會導致影像看起來不那麼清晰。儘管iPhone相機上的自動對焦已經取得了長足的進步，可以讓您快速拍照，但相機在某些情況下可能會錯誤地對焦錯誤的拍攝對象，從而使照片在不需要的區域更加模糊。如果iPhone上的照片看起來失焦或整體缺乏清晰度，以下貼文應該可以幫助您使它們更清晰。如何在iPhone上讓圖片更清晰[6種方法]您可以嘗試使用本機的「照片」應用程式來清理照片。如果您需要更多功能和選項
網頁圖片載入不出來怎麼辦？ 6種解決辦法
Mar 15, 2024 am 10:30 AM
有網友發現打開瀏覽器網頁，網頁上的圖片遲遲加載不出來，是怎麼回事？檢查過網路是正常的，那是哪裡出現了問題呢？下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來： 1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢，電腦中開啟的軟體比較多， 而我們造訪的圖片比較大，這就可能因為載入逾時，導致圖片顯示不出來， 可以將比較佔網速的軟體將關掉，可以去任務管理器查看一下。 2、造訪人數過多 網頁顯示不出圖片還有可能是因為我們造訪的網頁，在同時段造訪的
如何使用 JavaScript 實作圖片的拖曳縮放功能？
Oct 27, 2023 am 09:39 AM
如何使用JavaScript實作圖片的拖曳縮放功能？在現代web開發中，實現圖片的拖曳和縮放是常見的需求。透過使用JavaScript，我們可以輕鬆地為圖片添加拖曳和縮放功能，提供更好的使用者體驗。在本篇文章中，將介紹如何使用JavaScript來實現此功能，以及附有具體的程式碼範例。 HTML結構首先，我們需要一個基本的HTML結構來展示圖片，並為圖片增加
wps文檔中兩張圖片怎麼並排
Mar 20, 2024 pm 04:00 PM
在使用wps辦公室軟體時，我們發現不單單只用一種形式，文字裡會加入表格和圖片，表格裡也可以加入圖片等等，這些都是合併使用的，讓整個文件的內容看起來更豐富，如果需要在文件中插入兩張圖片，而且需要並排排列。我們接下來的課程就可以解決這個問題：wps文件中兩張圖片怎麼並排。 1.首先要開啟WPS軟體，找到你想要調整的圖片。左鍵點擊圖片會彈出一個選單欄，選擇「頁面佈局」。 2、在文字環繞中選擇「緊密型環繞」。 3.當需要的圖片都確認設定為「緊密型文字環繞」之後，便可以把圖片隨意拖動到合適的位置，點擊第一張圖片
