% 66 Responses

Last post: 10 months ago | Thread started: Jul 19, 12, 7:41 p.m.

RespondNew TopicDisable Images

• qoob

  What happens when you set the margin as a percentage in CSS? For instance, margin-top:10%.

  Does it compute it as 10% of the height of the object, 10% of the page, or what? And is this the same in all browsers.

  Jul 19, 12, 7:41 p.m. – Permalink

• BabySnakes

  10% of the elements parent set height. and should be the same cross browser.

  • +1– d_rek

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 19, 12, 7:51 p.m. – Permalink

• qoob

  I think that's wrong - at least, I tried it and the numbers don't add up for me

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 19, 12, 8 p.m. – Permalink

• IRNlun6

  It's based on context.

  On an h2 with a base font size of 16px (1em), and a line-height of 18px (1.125em); setting a 10% top margin is equal to 10% of 16px or 1.6px. I prefer setting the margin on a base line-height to help in managing the vertical rhythm. So 18px top margin / 16px base font size = 1.125em.

  If you have a div with no set height, then the context is the total of all borders, margins, paddings, font size, line-height, total line numbers, etc... of children in parent. If you have a set height size for container then the height of the container is the context.

  10% of 64px height container = 6.4px

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 19, 12, 8:19 p.m. – Permalink

• qoob

  "10% of 64px height container = 6.4px"

  Have you tried this in practice? It sounds logical enough but doesn't seem to work.

  • Hmm, I'm retracting this one. I always used percentages on width and assumed the same would apply for height which doesn't appear too...
    – IRNlun61/2

    ... doesn't appear too.– IRNlun62/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 19, 12, 8:26 p.m. – Permalink

• dbloc

  does anyone actually use percent for font size/line height?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 19, 12, 8:31 p.m. – Permalink

• qoob

  OK, I figured it out. Strangely enough, turns out it uses the WIDTH of the parent element to calculate margin-top and margin-bottom when set as a percentage:

  http://www.w3.org/TR/CSS2/box.ht…

  Totally nonsensical, sometimes I question whoever it is that comes up with this stuff :P

  • wow, ok then. nice to know...– IRNlun61/2

    makes sense.– dbloc2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJul 19, 12, 8:38 p.m. – Permalink