The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fighting space between inline-block

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #201651

    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 />


    .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 */


    Yes, you could but that’s just adding another layer of complexity to my mind.

    Easier IMO to set the parent font-size to 0 and reset the child font-size to whatever you need.

    Same principle as you suggest with no extra font involved and no margin adjustment.


    veeeeery nice! until today i was using negative margins ! :D thanks Paulie!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.