In the article “Fighting the space between inline-block elements” many different techniques are discussed for vanquishing the vexing foe of white-space. I might have another suggestion…
Can we not set the parent to a fixed-width font (like “Courier”) and then add a negative right margin equal to the width of a character (the ‘ch’ unit is equal to a zero character, and thus ALL characters in a fixed-width font)?
With that fixed-width relationship established we can then just revert the contents of the child elements to the normal font family.
Would somebody kindly point out any silly assumptions on my part before I run with this? Thanks.
<hr />
<h2>CSS</h2>
.parent {
font-family: Courier, “Courier New”, monospace;
}
.child {
display: inline-block;
width: 25%;
padding: 1rem;
margin: 0 -1ch 0 0; /* ‘ch’ equal to zero-character width, which in a fixed font is equal to ALL characters – including (hopefully) spaces /
}
.child * {
font-family: Arial, Helvetica, sans-serif; / …or whatever your original font family was */
}
