I’m going to build template use px combine with em. I’m trying Chris’s way from this article Why ems?
body { font-size: 100%/1.5 }
h1 { font-size: 3em; //163=48 }
h2 { font-size: 2.25em; //162.25=36 }
But I’m wondering about should I use em or px for margin / padding. Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.
I normally like to stick to just one type of unit and I use em for everything. There are exceptions but those are really rare.
The reason why I only use em for text, margins, paddings, etc is because then everything is proportional and I have better control when I resize (the window… or the screen or whatever).
I find it easier to do it this way for responsive designs
Yes, em really useful. But how to deal with nested issues of font-size and line-height?
I normally don’t have problems if I stick to one unit. It is relatively easy to control the inheritance when you just stick to one unit and set the reference font-size and line-height for the HTML element. At least, for me… or maybe my designs are not as sophisticated as yours 
If you are using em for other dimensions then use em for the margins and padding as well so that those gaps stay proportional to the text.
The only thing where you have to use px is for a minimum width border.
About the only time I use pixels is for images and border thickness. The rest of the time it’s em.
There are rare occasions where I’ve used them for padding, but not if text is involved as there is no guarantee that the font size I using during my work up is what every visitor will be using.
DISCLAIIMER
I can’t design worth beans, but I have learned some and I try my best.
Haha, you’re so funny. You have to set font-size and line-height for each element, is it right?
Why would you need to do that? You’d only need to do that if you need the text to be different sizes - then you can specify smaller by using fractional em (eg. font-size:0.9em ) or make it bigger (eg font-size:1.2em )
The line height is defined relative to the font size so 1.2 will be 1.2em if the font size is 1em and 1.44em if the font size is 1.2em
The first thing you should consider is creating a baseline, a normalization, a reset.
After that, you can put all down in px or in em or combined and with other units, like rem. All it takes for you are some calculations, from basic to more complicated. Using relative units like em will save you from delving into complicated calculations and wide spread changes when changing the baseline.
Thank you. As far as I know set body font-size in percentage will avoid IE bugs.
Thank @vion9929 for useful information. I’m using Bootstrap 3 for my project, as I know the problem with rem is browser support (IE9+)
Yes you are right @thehung1724 , Set the body font size in percentage and it will avoid your IE bugs and it will also be so useful . I have also used this method in one of my website .
Yes and no.
html {font-size: 100%;}
body {font-size: 1em;}
this code will avoid that bug. You simply need to set the parent element as a percetange and then you can use em everywhere else
edit: I just realize that I just said what @hfshakir52 said. I apologize for being repetitive.
thehung1724, Going back to your first post… this is probably a typo, but you DO know that you cannot use JavaScript slash marks to comment out CSS, don’t you? The h1 and h2 examples are invalid as shown.
I don’t usually use ems for margins because most of the time you want the same margin on elements even though they may have a different font-size.
For example imagine you have a header and on the next line you have a p element and you give both a margin of 2 em then the elements will not be vertically aligned as the margin will be different for both. You would then need to use some ridiculous fractions to line them up and indeed with rounding issues would actually never line up. (Maybe for horizontal elements it would be ok.)
I always use px for margins (or percentage for fluid layouts) and also use px for borders and padding. There are cases when you may want to use percentage or em padding but to be honest they end being more trouble than they are worth and the difference is hardly noticeable especially when using the border-box model. I actually prefer it that my padding doesn’t squash or get bigger proportionally to the font-size and most times it looks better that way as it matches the other elements on the page.
The main thing is that you code your text in ems/%/rem rather than pixels.
I tend not to set many elements widths in pixels these days either but I don’t use ems much either as I prefer a fluid layout with a max-width in px to stop the layout growing too wide as would happen with ems. As long as your inner containers are fluid and not constrained by fixed widths or heights then the content can grow nicely when text is resized.
In the end its a matter of choice depending on the layout in hand and you do what’s best for the design in front of you. I never say never though and will use what is best for the job in hand.
Em for text size and px for elements would be better. Thank you for really useful information.
Not necessarily. Both ways have issues. While using px for the margins allows you to align headings with the following text even though they are different sizes, there is a different problem that using px presents.
If 1em is 10px then using a 20px margin is a noticeable gap. but if 1em = 100px then that 20px gap becomes too small to even notice it is there. Of course how big an effect this will have depends on how big your visitors need to make the text in order to read it. I know people who find text needs to be magnified to 20+ times its original size in order to be readble for them.