CSS - Percentages or Pixels

CSS - Percentages or Pixels?

Mobile webpages. %'s rock for that. As it will (obviously) adjust to suit.

However when you want a fixed width for say example an article of text that you want displayed in a certain way, px's is the winner.

Both have many plus's and minus's over each other :)

CSS Percentages And Pixels

% value in margin and padding is always % of the parent's width.

So say you have a <div> with margin-bottom: 25%;, inside another <div> which is 1000px wide, then the bottom margin of the <div> is 1000*25% = 250px.

.container {  width: 100px;  background: green;}
.child25,.child45,.child-none{  background: yellow;}
.child25 {  margin-bottom: 25%;}
.child45 {  margin-bottom: 45%;}

<div class="container">  <div class="child25">This one should have 25px margin bottom.</div>  <div class="child45">This one should have 45px margin bottom.</div>  <div class="child-none">This one has no margin</div></div>

Which is better to use in CSS, percentage or pixels?

You won't have any problems using this approach, both percentage and pixels work fine depending on your needs. If you need a fluid site, then percentage might be your best option. And ems for the fonts, so the user can modify its display if necessary.

Couple of expert's opinions on this:

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

And here's an interesting twist: Percentage + pixels:

http://www.cssplay.co.uk/boxes/outside.html

Setting width/height as percentage minus pixels

You can use calc:

height: calc(100% - 18px);

Note that some old browsers don't support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

When is it okay to use percents in css?

For responsive design for example, using percents is the way to go, as elements having, say, a width: 50%; will always use half the container on any device, whatever the size, as opposed to, say, width: 400px; which would be messed up in a small size device.

But of course sometimes you want to use pixels to define an element to always have a fixed width. It really depends on the use case. But the main thing to have in mind is how the element will adjust in different screen sizes.

Why does width in percent produce a different result than width in pixels?

Percentage will be change according to your screen size, where as pixels doesn't change according to screen and pixels are not responsive to different screen sizes.

If you want to give some value without giving percentages, you can use, "rem" units. And it is more responsive. Check out how rem units works compared to pixels.

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Edited =>
Referring the comment:

Sample Image

Why the difference when using percentage vs px to define height?

Percentages are relative and pixels are absolute. The computer knows what 400 pixels is. However when the measurement is relative, the final absolute output must have a relation with some other measurement. 400px is 50% of 800px.

If example you have no content in your <body>, the page collapses and it has no height.

If you set <body>'s height to 100%, it still has no height because its parent <html> has no height. However by setting <html>'s and <body>'s heights to 100% you will fill the viewport (html's "parent").

This applies to other block elements like divs.

CSS - Percentages or Pixels