Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    What is the meaning of Margin (example : margin-left & margin-top)?

    Hi,

    I am confused on the meaning of "margin". Is it the distance from the browser's edges or the immediate parent's edge.

    I have the following example with 3 DIVs with the ids a,b & c. I have embedded b inside a and c inside b. I have put margin-left and margin-top for b and c 20px.

    Why is it leaving a space between browser's top edge and the div "a" but no space between browser's left edge and the div "a" ?

    Please have a look at the following example, I am a bit confused on this. I expected that margin-top would behave the same way as margin-left.


    Html :
    Code:
            <div id="a">
                <div id="b">
                    <div id="c">
                    </div>
                </div>
            </div>
    CSS :
    Code:
                #a {
                    background-color:#f1859c;
                    width:400px;
                    height:400px;
                }
                
                #b {
                    background-color:#c43955;
                    width:200px;
                    height:200px;
                    margin-left:20px;
                    margin-top:20px;
                }
                
                #c {
                    background-color:#6a1f2e;
                    width:100px;
                    height:100px;
                    margin-left:20px;
                    margin-top:20px;
                }
    I have put the colors just to show the difference between the DIVs.

    thanks a lot,

    Isaac

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    The issue he's dealing with is "collapsing margins", which I don't see described in the link at css-tricks. Here's a link that discusses it - http://www.w3.org/TR/CSS2/box.html

  • Users who have thanked tracknut for this post:

    Isaac Sureshkum (10-07-2013)

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Margin
    The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

    The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

    Padding
    The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

    The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

  • Users who have thanked penweb for this post:

    Isaac Sureshkum (10-07-2013)

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by penweb View Post
    Margin
    The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

    The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

    Padding
    The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

    The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
    Something I did when I started working with paddings and margins, is I would put a border around everything, including paragraphs so that I could see what the (border) was and the paddings. Rememer adding a border will add more space ie. 1px for:

    border: 1px solid; setting..

  • Users who have thanked penweb for this post:

    Isaac Sureshkum (10-07-2013)

  • #6
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Thanks penweb for the explanation.

    thanks a lot,

    Isaac
    Last edited by Isaac Sureshkum; 10-07-2013 at 09:48 PM.

  • #7
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    70
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Make sure you learn the differences between margin and padding as it's quite important once you start wanting to create space between elements. For example, adding padding to an anchor will increase the clickable area as well as created the space around. Adding a margin will not increase the clickable area but will create the same space. You also need to read up on block elements and inline elements as inline elements may need "display:block" applied to ensure the margin's actually effect the element.
    Working for Edge Three Sixty doing Drupal Development

  • #8
    New Coder
    Join Date
    Sep 2013
    Posts
    41
    Thanks
    0
    Thanked 1 Time in 1 Post
    Margin-top is for measuring the external distance to the element, in relation to the previous one.
    The Margin-Left property sets or returns the left margin of an element.

    Hope this helps.


  •  

    Posting Permissions

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