Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Removing Gaps Between Inline and Inline-Block Elements2:57 with Guil Hernandez
You'll usually see default whitespace between elements when you set their display value to inline or inline-block. If you don't want the spaces in your design, there are several ways you can remove them.
Other methods for removing the default white space
font-size: 0;on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
- Adding an HTML comment between the inline-block elements will also remove the space
- The browser interprets the line breaks and spaces in the HTML as content.
- The browser adds spaces between elements displayed
inline-block, just like it adds spaces between words.
- You can remove the gaps by applying a small, negative right margin to the elements.
- The element's
font-sizevalue affects the size of the gaps between inline and inline-block elements. The larger the font size, the more you'll need to compensate with margins, so you'll need to experiment with negative margin values.
You may have noticed these small unclickable gaps
between the navigation list items.
You'll usually see default white space like this between elements when you
set their display value to inline or inline block.
Now these spaces won't go away even if I set the list item margin values to zero.
And this isn't a browser bug, it's just the way setting elements to inline or
inline block work.
You see, the browser interprets the line breaks and spaces in the HTML as content.
For example, words in a paragraph are inline with each other and
have spaces before and after them.
So the browser adds the spaces between these inline and
inline block items, just like it adds spaces between words.
If you don't want these gaps in your design,
there are a few ways you can remove them.
First you can place the closing
- tags next to each other in the HTML so that
there are no spaces in the markup between the closing and opening list item tags.
You can also remove the closing list item tags in the navigation.
I prefer not to write my HTML code this way.
So an easier solution is to apply a small negative right margin to the list items.
Inside my style sheets media query,
I'm going to create a new rule that targets the list items inside main nav.
To apply the negative right margin, I'm going to use
the margin-right property, and as the value I’ll type -4px.
When I refresh my page, you can see how the negative right margin
undoes that default white space between the list items.
So the negative margin pulls the list items towards each other
to close the gaps.
Keep in mind that the element's font size affects
the size of the gaps between inline and inline block elements.
So the larger the font size the more you’ll need to compensate
with negative margins.
So here the value -4px works great when the font size
is set to the browser's default size of 16 pixels.
If your font size value is smaller or larger than 16 pixels you'll need to
experiment with the negative margin values.
For this layout I don't mind the spaces between the navigation links because
the extra space creates a clear visual separation between the links.
In fact, I'm going to use that space to my advantage, and
I'll even add a little more margin for separation.
So, I'm going to change the margin-right value to 12px.
So, now I have a little more separation between the navigation items.
You need to sign up for Treehouse in order to download course files.Sign up