爲什麼這張圖片上有一個右邊距？

我的頁面上有兩個<button>元素，裏面都有一個<img>。問題是這兩個圖像都有一個右邊距。儘管我沒有把它添加到任何地方。我仔細檢查了代碼兩次，我也做了一定要手動排除從圖像中右頁邊距：爲什麼這張圖片上有一個右邊距？

button img { 
    margin-right: 0px; 
}

這裏是開發工具開放（鉻）

你截圖當我將鼠標懸停在邊距框上時可以看到邊距，但您也可以看到圖像的margin-right爲0px。

這也發生在右側的圖像上。我使用Bootstrap，如果這有什麼區別。

代碼的按鈕和圖像：

<section class="container-fluid" id="upload-buttons"> 
    <button><img src="camera128.png" class="img-responsive" alt="Camera Clipart">Upload Image</button> 
    <button><img src="video128.png" class="img-responsive" alt="Video Recorder Clipart">Upload Video</button> 
</section>

任何解決方案？謝謝。！

來源

2015-09-06 Bogdan M.

用戶'important'覆蓋像'按鈕IMG保證金{保證金右：0像素重要;}' –

的問題是圖像具有display:block但它比窄其父母。您可以將圖像的寬度設置爲100％，或將邊距的圖像設置爲0 auto以將其居中。

在這個片段中，你可以看到「藍色」矩形「有」100像素margin-right。但事實並非如此。藍色的矩形是你的形象。！

.wrapper { 
 
background:red; 
 
width:300px; 
 
height:300px; 
 
} 
 

 
.inner { 
 
background:blue; 
 
width:200px; 
 
height:100%; 
 
}

<div class="wrapper"> 
 
    <div class="inner"></div> 
 
</div>

來源

2015-09-06 11:26:03

謝謝！這樣可行。 –

@ aCodingN00b我的榮幸！ –

大廈@Amit辛格的評論，你可以重寫特異性規則，重要的，像這樣：

button img{ 
    margin-right: 0px !important; 
}

docs 和when to use it

來源

2015-09-06 11:19:48 byrass

我加了它，但毛利率仍然存在？ –

我需要代碼進行故障排除，使用jsfiddle.net並複製重要的塊。 – byrass

在這裏http://jsfiddle.net/e0hxy3Lj/。但是你將無法看到圖片和Bootstrap組件。 –

爲什麼這張圖片上有一個右邊距？

回答

相關問題