#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    23
    Rep Power
    0

    Bottom and top margins


    Hi there,

    I'm having some trouble understanding margins so I hope you can provide some help.

    I have the following code:

    Code:
        <!DOCTYPE html>
    
        <html>
        <head>
        <title>Box</title>
       <style>
        #p{border: solid;
        padding-bottom: 20px;
        margin-bottom: 200px;}
        #g{margin-left: 20px;}
         
        </style>
        </head>
        <body>
        <p><span id="p">Pablo</span> <span id="g">Gonzalez</span></p>
        <p id="ab">below</p>
        </body>
        </html>
    According to what I understand, the space between two elements is determined by their margin. So right now, the span "Pablo" is on top of the word "below". "pablo" has some padding so the bottom part of its border is almost touching "below".

    As you can see, "pablo" has a lot of bottom margin, but no matter how much margin I add, its border continues to be right on top of below. I expected for a white space to be created between "pablo" and "below" but that's not that case.

    If I then add some top margin to "below", then I get the expected result. So, I understand that the space between them is a combination of their margins (correct me if I'm wrong) but why doesn't "pablo"s bottom margin affect the space between them like "below"s top margin does?

    I appreciate any help!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0
    I think cannot margin for span like your css. You can add display:block for span.
    Code:
    #p{
    border: solid;
    padding-bottom: 20px;
    margin-bottom: 200px;
    display:block;
    }

    Comments on this post

    • pgonzaleznet agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    23
    Rep Power
    0
    Hi cpham,

    Thank you very much! I did some research on what you said and found the following:

    8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

    Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.


    Also, seems like using the Display property is the right approach here.

    Again, thank you very much for your help.

IMN logo majestic logo threadwatch logo seochat tools logo