Menu
The precondition is that I use monospace as my font-family, but it doesn't seem to work properly, I've tried some solution but neight of them work, my HTML structure is as below:
<!DOCTYPE html>
<style>
body {
font-family: monospace;
letter-spacing: 0;
word-spacing: 0;
font-size: 32px; /* large enough to see the effect */
}
div:last-of-type {
padding-left: 1em; /* what's the value? */
}
</style>
<div>123456</div>
<div>abcdef</div>
use em
em should be equals to the computed font-size value, but padding-left: 1em; doesn't work:
use px
padding-left: 32px; makes the same output as padding-left: 1em;.
use ex
ex should be the computed height of the letter 'x', and it doesn't work either:
use ch
OK, webkit doesn't support ch as a css unit.
So how can I write the css to exactly indent the second div one character width, that is, the first '0' should be left-aligned to the letter 'b', without any deviation.
552
One possible way, although a bit hacky, would be to insert a space before the row using the :before pseudo selector with content:
div:last-of-type:before {
content: " ";
white-space: pre;
}
I have no idea as to which browsers support this, but I'd assume all modern browsers would.
http://jsfiddle.net/cavqM/
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
