Font-size creating a "margin" effect (HTML & CSS)

HTML-CSS
1

Hello everyone,

I’m studying about fluid layouts and I made this basic example to practice. I was following along a book example and for some reason the font-size makes a difference in grouping all the elements inside the <div class="wrap_middle">. It’s like it creates a margin effect.

On the code (below) I commented out the font-size: 0 to show what I’m referring to:
Fluid Layout Example

I’m sorry if they I worded the issue is a bit confusing, but can someone explain why this happens?

2

This happens because you’ve arranged your three containers (aside - main - aside) next to each other by changing their default display property of block to inline-block. The inline part is a bit tricky, it means that these elements get treated as text being on one line. They also get text-related CSS (word-spacing, letter-spacing, also font-size), which you can’t do anything about and which causes those margins. For your CSS, those elements are letters, so there’s space between them.

I’m not sure how old the book is you’re following, but in modern CSS, one would just set .wrap-middle to display:flex and leave the other elements as block - problem solved (plus if this is related to fluid layouts, flex is almost a must anyway).

1 Like
3

The font-size: 0 is a fix for the white-space issue you get with inline-block elements.

It can be fixed using other techniques like adding comments before and after each of the elements in the HTML or removing the space in the HTML.

Without the fix, the inline-block elements will have some white-space (spaces from the HTML) that cause the total space taken up by the elements to be more than just the element size given (so they do not add up to 100%).

Removing the spaces in the HTML:

<div class="wrap_middle">
  <aside class="left"></aside><main class="middle"></main><aside class="right"></aside>
</div>

Adding comments to remove the spaces

<div class="wrap_middle">
  <aside class="left"></aside><!--
  --><main class="middle"></main><!--
  --><aside class="right"></aside>
</div>

Both will require you to set the 600px height on the .wrap_middle class as well.

1 Like
4

That helps a lot and now makes total sense!

The book is not old at all, the very next topic is Flexbox, but the author wanted to show Fluid Layout and how things used to be done before.

5

Thank you so much! This was very helpful. I didn’t know there were more ways of fixing this issue.