Scale down a webpage to 90%

Question

When you press Ctrl+- on any browser, the page scales down to 90% of it's original size. I need to replicate that, and open my webpage at 90% of it's original by default, instead of 100% because it looks nicer at 90%.

I tried the most common approach as mentioned here, here, and here, all of which basically tell you to add this block of code in your css.

html
{
    zoom: 0.9; /* Old IE only */
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

The problem with this is that it creates a gap on the left and the right sides, as well as a huge gap on the top, which aren't present when you manually reduce the size by doing a ctrl+-.

This is what happens when I use the above mentioned code - notice the gaps on the left, right, top.

While this is what I want - this is what happens when you do a ctrl+ - manually in your browser.

How do I go about this?

EDIT: As Jonathon said in the comments, if my page looks nicer at 90%, I should have designed it to be that way instead of having to scale down. The problem was that I'm using this default template, and I just prefer it at 90% over the full 100%.

Answer 1

You need to use/convert to relative units in your CSS. Either % or em or rem.

Then at the body level you can set an absolute size that results in the relative measures recalculating to what you want.

If you use em or ex exclusively: You declare font-size: 90% for body and you'll be able to adjust on the fly.

It all comes down to the units you choose and making them relative will allow you the kind of freedom you are looking for now.