1

Im trying to give some margin-top to my .links li a, but its not working, I give this margin but the links stay also without margin.

Do you see why this can be happening?

Here I have my problem:

http://jsfiddle.net/dG6wn/2/

My html:

<div id="content">
    <h2>Title</h2>
    <span id="date">22/05/2014</span> <br /> 
    <img class="img" src="../image1.jpg"/>
    <p>
        Paragraph text     
    </p>
    <div id="downloads">
        <h3>Links:</h3>
        <ul class="links">
            <li><a href="">Link bigger</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link 3</a></li>
        </ul>
    </div>
    <span class="back">Back</span>
</div>

My css:

.links li a 
{
    text-decoration:none;
    background:red;
    color:#000;
    margin-top:20px;
    margin:0 auto; 

}
UserX
  • 1,295
  • 7
  • 25
  • 39

2 Answers2

1

try adding

position: relative;
display: inline-block; /* might need this too */
CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • Thank you, it worked only with display:inline-block! But can you explain, if it is possible why we nedd this display:inline-block? Because Im not seeing why! – UserX May 22 '14 at 01:52
  • @Marby see this answer http://stackoverflow.com/a/19153771/3041194 – CRABOLO May 22 '14 at 09:00
1

reorder the margin styles. set display to inline-block.

.links li a 
{
    text-decoration:none;
    background:red;
    color:#000;
    margin:0 auto; 
    margin-top:20px;
    display: inline-block;
}

updated http://jsfiddle.net/dG6wn/3/

gp.
  • 8,074
  • 3
  • 38
  • 39