內聯元素不接受margin-top

我試圖給內聯元素（圖片庫的圖像縮略圖）。但是我的元素似乎忽略了保證金最高。
標記是
內聯元素不接受margin-top

<div id="row1-left"> 

      <div id="gallerypreview"> 
       <img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg"> 
      </div> 
      <div id="gallerythumbs"> 
       <div id="gallerythumbsInner"> 
        <div class="gallerythumb"> 
        <img src="gallery/autumn1.jpg"> 
        </div> 
        <div class="gallerythumb"> 
        <img src="gallery/autumn2.jpg"> 
        </div> 
        <div class="gallerythumb"> 
        <img src="gallery/autumn3.jpg"> 
       </div> 
       </div> 
      </div> 

     </div>

樣式是：

#row1-left{ 
width: 460px; 
height: 310px; 
float: right; 
margin: 15px 15px 0px; 
} 

#imggallery{ 
    width:450px; 
    height:300px; 
    margin:5px; 

} 
#gallerypreview{ 
    width:450px; 
    height:200px; 
    margin:2px 5px; 
    border-radius:20px; 
    background-color:#E7E7E7; 


} 
div#gallerypreview>img{ 
    margin:1px 25px; 
    width:400px; 
    height:198px; 
} 
div#gallerythumbs{ 
    margin:5px 5px; 
    width:450px; 
    height:90px; 
    background-color:#E7E7E7; 
    border-radius:5px; 

} 
#gallerythumbs .gallerythumb{ 
    display:inline; 
    width:140px; 
    height:86px; 
    margin:5px 5px; 
} 
div.gallerythumb>img{ 
    width:138px; 
    height:76px; 
}

據對SO一些舊帖子，margin-top不被施加到內聯非替換的元件。我的問題是，如果有任何黑客可以完成這項工作，例如，我的內聯圖像縮略圖將與其頂級父元素保持空間？

來源

2014-10-19 JasonStack

讓你的元素'顯示：inline-block的;' – dashtinejad 2014-10-19 08:11:50

檢查我的回答出來，我想是你在尋找什麼 – 2014-10-19 08:17:19

內聯元素和邊距是一個熱門話題，因爲它的不尋常活動。有些人使用填充來克服這個問題。

.....

另一種方式是使用display：table;而不是顯示：inline;

最好的辦法是....

使用的CSS樣式，這樣

div{ 
position:relative; 
top:-2px; 
}

由此帶來的股利2個像素下來。

來源

2014-10-19 08:12:12

兩個工作：通過或者設置元素'顯示：內聯塊「或通過將其位置設置爲」相對「，並給它一個正值」頂「值。 – JasonStack 2014-10-19 08:34:47

@misaq如果答案有幫助，請將其投票，這樣可以幫助其他人。我很樂意提供幫助。 – 2014-10-19 08:36:27

display：inline; 不尊重頂部和底部邊緣 ...

來源

2016-07-27 11:06:04 Friend

內聯元素不接受margin-top

回答

相關問題