HTML CSS相同DIV的<a>元素之間的垂直間距

目前，我所看到的是第一張圖片。我想知道如何在圖片之間添加空格（底部邊距？），如圖2所示？他們2個並排的塊是2個不同的DIV，並且每行中的圖片都是同一個div的元素，所以底部邊距不起作用。（CODE在底部）HTML CSS相同DIV的<a>元素之間的垂直間距

圖片1：

圖片2：

HTML：

... 
<div class="meniu"> 
        <a href="#">NAUJIENOS</a> 
        <a href="#">KREPSINIO VADOVAS</a> 
        <a href="#">TRENIRUOTES</a> 
        <a href="#">IDOMYBES</a> 
        <a href="#">GALERIJA</a> 
        <a href="#">APIE MUS</a> 
       </div> 
       <div class="rightbar"> 
        <div class="rightpic2"> 
         <a href="#"><img src="pic3.png"></a> <br> 
         <a href="#"><img src="pic4.png"></a> <br> 
         <a href="#"><img src="pic4.png"></a> <br> 
         <a href="#"><img src="pic5.png"></a> <br> 
         <a href="#"><img src="pic3.png"></a> 
        </div> 
       </div> 

       <div class="rightpic1"> 
        <a href="#"><img src="pic1.jpg"></a> <br> 
        <a href="#"><img src="pic2.jpg"></a> 

       </div> 
...

CSS：

.rightpic1{ 
     float:right; 
     margin-right:30px; 
     margin-top:100px; 


    } 

    .rightpic2{ 

     margin-right:24px; 
     margin-left:24px; 
     margin-top:38px; 
    } 

    .rightbar{ 

     float:right; 
     background-color:white; 
     margin-top:62px; 
    }

來源

2014-06-20 GytisK

<a>元素顯示內聯。尼克斯在標記中全部爲<br>，並將display: block添加到CSS中。

.rightpic1 a, .rightpic2 a { 
    display: block; 
    margin-top: 15px 
}

來源

2014-06-20 21:02:10

謝謝，但我用margin-bottom得到正確的邊距:)它仍然工作了，但！ – GytisK

首先，您需要關閉所有圖片標籤。然後將display:block;添加到您的.rightpick1 & .rightpick2類中的鏈接。然後，您可以成功添加margin-bottom到您的鏈接。

我附上了一個fiddle作爲例子。希望有所幫助！

來源

2014-06-20 21:11:17 chloelonan

HTML CSS相同DIV的<a>元素之間的垂直間距

回答

相關問題