SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with margin in CSS

    Guys,
    I have <a> tag inside <li>. Ideally, I want to force margin-right:25px for <a>.

    This works fine as long as text within <a> is restricted to 1 line, but as soon as it goes to second line the margin-right:25px does not work for first line but works well for second line.

    <li><a class="nonActive" href="welcome.aspx">Welcome to your total reward statement</a></li>

    CSS
    ul li a
    {
    margin-right:25px;
    }

    ul a.nonActives
    {
    padding:15px 20px 1px 0;
    overflow:hidden;
    }

    ul li
    {
    list-style:none;
    text-align:right;
    font-size:10px;
    padding-bottom:5px;
    color:#2BB0D4;
    }

    In the attached image all yellow borders for navigation bar is <a> and purple is <li>. See the problem with first navigation item, when spread over two lines its creates problem. Let me know if their is any solution to this.

    Thanks in advance.
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Anchors are inline elements and when you apply padding to inline elements it adds the padding to the inline element only That is to say that the padding gets stuck to the inline element itself and not the box around it. So for right padding the padding is stuck at the end of that inline element only.

    It has nothing to do with the current line and when the inline element spreads over 2 or more line-boxes then it takes the padding with it still attached to the end of that inline element (e.g. piece of text in your case).

    If you applied left padding to an inline element (say text) and the text wraps to the next line then there wouldn't be any left padding on the new line because the left padding is only applied at the start of the element.

    Applying padding to inline elements is like gluing a bit of padding on to that bit of text at the point specified.

    If you want to create padding at either end of a block box then you would need to make the anchor display:block and then padding is applied to the box and not the inline text content.

    ul li a{display:block}

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case there is no padding given. I am trying to put margin for the whole <a>. but u are correct. when I put display:block it work absolutely bang on.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You can apply what Paul has said for margins as well : )

    Though I wonder, if the a's were kept inline, could right padding on the li's do the same job? It seems that it would as it would push the inside of the li's in and push the a text back. ?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes margins and padding on inline elements apply to those inline boxes and not the block box that surrounds it. The inline box model is a lot more complicated than the block box model and has its own set of rules to abide by

    As Somme mentioned above putting padding on the list would have achieved the same result.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •