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 5 of 5
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts

    margins in em give different outputs for adjacent elements!

    Hi all,

    Please check the link

    I’ve applied margin-left:15em; to both <h5> and the inner <div>, but strangely it reads a smaller value for <h5>. The same occurs for padding also. I've tested in FF2-3 and IE6-8 and the issue is visible in all of them. .
    (It's OK, if I give a px value)

    Any reason for this behaviour?

    Thanks.

    Attached Thumbnails Attached Thumbnails margins in em give different outputs for adjacent elements!-cf.jpg  
    Last edited by abduraooft; 06-16-2009 at 10:46 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    The font size has an influence.

  • Users who have thanked VIPStephan for this post:

    abduraooft (06-16-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Um.. I've applied font-size:1em; for the body tag. Why that inherits differently for <h5> and <div>

    Applying font-size:12pt; to the <h5> fixes it, Thanks for the pointer. But
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Quote Originally Posted by abduraooft View Post
    Um.. I've applied font-size:1em; for the body tag. Why that inherits differently for <h5> and <div>
    “em” is a relative unit. By default different level headlines have a different font size. If you set an “em” size you set the size relative to the parent element’s font size or the default font size if former one doesn’t exist. Now what you did was setting a relative size for the body element without equalling the size for all elements. This means an h5 is still smaller than an h1 or a paragraph, as it is in th default settings. You’d have to set an absolute size for the body (e. g. 13px or 10pt) in order to set the size of child elements relative to that size. This way when you set the h5 and the p to .5em it will be 50% the size of the body font size.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    This way when you set the h5 and the p to .5em it will be 50% the size of the body font size.
    Thanks. I've been trying to follow http://jontangerine.com/log/2007/09/...youts-with-css, to make a fluid layout.

    font-size:12pt; doesn't work when I zoom the contents(I'm using a javascript based buttons to change the body's font-size in em units). Anyway setting a font-size:1em; to that <h5> (without changing the body's font-size) makes it OK now. I can't link this with your above reply except the last line

    But anyway thanks a lot and I'm satisfied with my current output.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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