1

Here is an odd one:

<div class='menu-side'>
  <div>
    <div class='name'>
      Name
    </div>
    <div class='item'>
      Item
    </div>
  </div>
</div>

Extra spaces and CRLFs between name and item elements causes them to wrap even with box-sizing: border-box defined

I would like to keep the format of my source code the way it is, without removing extra spaces, and without adding white-space: nowrap because that's what box-sizing: border-box is implemented for.

https://jsfiddle.net/zm7u5ayj/

(to recreate: remove all characters between elements to become: </div><div class='item'>)

Any help is greatly appreciated.

Edit: Dirty tricks provided in this question How to remove the space between inline-block elements? are not comforting solutions for me.

Community
  • 1
  • 1
Alex G
  • 3,048
  • 10
  • 39
  • 78
  • What browsers do you need to support? Does the solutions described in this thread not help you - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?rq=1? Your problem is not due to `border-box`, it is due to `display: inline-block`. – Harry Jun 13 '16 at 05:31
  • There are no solutions provided in this post, only dirty tricks with resetting `font-size` and adding comments. But I guess I'll stick with adding `` for now. – Alex G Jun 13 '16 at 13:59
  • Those are your only *solutions*. There are none other than those covered in that thread. – Harry Jun 13 '16 at 14:02
  • 1
    I guess we'll just wait for `white-space-collapsing:discard` or `text-space-collapsing:discard` to be implemented in CSS3 – Alex G Jun 13 '16 at 14:03

1 Answers1

1

You're looking at a strange and long-running bug with the margin of inline-block elements that gets undone when a few different things happen. One of those things is formatting the ending and opening tags of the elements right next to eachother and another is giving the elements a float, which is probably the sanest way to rectify the issue in your case.

.name, .item {
  float: left; // right or left, depending on what you're trying to accomplish
}
JackHasaKeyboard
  • 1,599
  • 1
  • 16
  • 29