CODEWITHSUNDEEP
htmlcssnewlinespace
Ruben Rizzi
Ruben Rizzi

Reputation: 352

Newline between html element breaks html layout

I know that a newline in html between elements is treated as space, but I think this is pretty scary when you try to play with responsive layout.

For example, here we have the expected and correct behaviour, but to obtain it I had to remove the newline in the html between the element: https://jsfiddle.net/xew2szfu/1/

<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>

Here I wrote the html with a newline, as you normally do, and everything got broken: https://jsfiddle.net/rL1fqwkc/1/

<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>

I know I can fix the problem with a float: left, but I wonder if I missed something, the default behaviour sounds really incorrect to me.

Upvotes: 2

Views: 161

Answers (1)

Jacob G
Jacob G

Reputation: 14172

It is happening because inline-block puts a space in between elements, and with the space the second div moves down, since it can't fit on the line any more.

There are many ways to combat this. As you said, float is one of them. This excellent CSS Tricks article is a great help, but I'll go over the ones you probably want:

Negative margin:

nav a {
  display: inline-block;
  margin-right: -4px;
}

Very simple, you can have a nice html format, but moves the element over to hide the space.

Set the font-size to 0:

.recommend-friend__slider{
  font-size: 0;
}
.recommend-friend__dialog {
  font-size: 12pt;
}

Or, my personal favorite, skip the inline block and use flexbox instead.

Upvotes: 1

Related Questions