2011-09-30 39 views
2

我有HTML這樣的:如何調試div/span的高度?

<div> 
    <span style="display: inline-block;height:20px">20</span> 
    <span style="display: inline-block;"><img src="img/ex.png"/></span> 
</div> 

我第二範圍導入的圖像15×15像素

我可以用鉻檢查,我可以看到,第一張圖片有身高15 和第二個跨度高度爲21.(第一個高度爲20,如預期)

有人可以告訴我爲什麼第二個跨度有高度21而不是15?

謝謝,它的駕駛我堅果

我加入下面的頌歌:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
    </style> 
    </head> 
    <body> 

    <div> 
    <span style="display: inline-block;height:20px">20</span> 
    <span style="display: inline-block;"><img src="img/ex.png"/></span> 
    </div> 



</body> 
</html> 
+0

是否有任何樣式定義?即。 span {padding:3px; } – AVProgrammer

+2

更多的代碼(特別是CSS)/演示網站會有很大的幫助。 –

+0

沒有css。 – Zo72

回答

3

那麼無論是圖像比你想象的大,圖像有填充/保證金,你是不是服用或者跨度有你沒有考慮到的填充/餘量。

  1. 檢查Chrome中的每個元素,然後跨越第一個圖像。
  2. 展開度量在窗口的右側
  3. 小圖會告訴你每個貢獻者元素大小爲(填充,邊距,邊框,元素大小)

enter image description here

+0

我已經添加了代碼來顯示您。請試用16x16的圖像,你會發現包裹圖像的跨度更大。 – Zo72

0

測試在我頁面,高度爲15px

你是否設置了任何跨度填充?

或嘗試做*{padding:0;margin:0;}

給出的跨度類

,或者使.span{padding:0!important;margin:0!important;}

或添加

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

頁面頂部的W3C

0

使用Chrome的開發者工具來檢查元素和微量元素的計算樣式。我認爲你很可能從某個地方選擇了填充樣式。