Quick Tip: Adaptive Inline Block Elements

What do we need display:inline-block; for?

If you want that a <div> with the id="element" oder or another block-element adapts to the size of its content one has to add the following line of CSS code:


we wrap #element in <div id="wrapper"> and we add


We achieved our goal, see picture:

For reference our code is:




.element and some more content, and more, and more...

.element .after

.element .after


	#wrapper-a *{

The problem

In the following example, we get a problem using the presented method: the white gaps between the nav elements were not intended.

index.html – (source)


styles.css – (source)

nav a {
  display: inline-block;
  padding: 5px;
  background: #933;

Alternatives display:table and display:table-cell

We can circumvent our problem as follows…

… in example 1:



… in example 2:

nav a{display:table-cell}

Solve the Problem

The following methods originate from CSS-Tricks. Each item is a unique method.

  1. Remove the whitespaces between inline-block elements, because those cause for the white gaps
  2. Insert HTML-comments (<!– –>) with to comment out all whitespace.
  3. Use negative margins, like margin-right:-4px;
  4. Omit the closing tag (e.g. </li>)
  5. Use CSS3 Flex-box (browser support).
  6. Set font-size of whitespace to zero: nav{font-size:0}, nav a{font-size:16px}

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove, that you are human! *