Will Whitespace or Wrap Be Ignored Between Two Block Elements in HTML

Will whitespace or wrap be ignored between two block elements in HTML?

If we refer to the specification:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

So only margin can adjust distance between two block elements but let's don't forget Anonymous block boxes which is very important here and probably the anwser to your question.

Let's take this example:

.b {
 border:1px solid;
 height:50px;
}

<div>
  <div class="b"></div>

some text

<div class="b"></div>
</div>

How to remove the space between inline/inline-block elements?

Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Since this answer has become rather popular, I'm rewriting it significantly.

Let's not forget the actual question that was asked:

How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

http://jsfiddle.net/thirtydot/dGHFV/1361/

This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).

Most of the possible issues with relative font sizes are not complicated to fix.

However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).

This is what I, as a reasonably experienced web developer, actually do to solve this problem:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

It's easy. It's simple. It works everywhere. It's the pragmatic solution.

You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.

Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

You can do this, as I usually do:

 <ul>
     <li>Item 1</li><li>Item 2</li><li>Item 3</li>
 </ul>

http://jsfiddle.net/thirtydot/dGHFV/1362/

Or, this:

 <ul>
     <li>Item 1</li
     ><li>Item 2</li
     ><li>Item 3</li>
 </ul>

Or, use comments:

 <ul>
     <li>Item 1</li><!--
     --><li>Item 2</li><!--
     --><li>Item 3</li>
 </ul>

Or, if you are using using PHP or similar:

 <ul>
     <li>Item 1</li><?
     ?><li>Item 2</li><?
     ?><li>Item 3</li>
 </ul>

Or, you can even skip certain closing tags entirely (all browsers are fine with this):
```
 <ul>
     <li>Item 1
     <li>Item 2
     <li>Item 3
 </ul>
```

Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.

Ignore whitespace in HTML

Oh, you can really easy accomplish that with a single line of CSS:

#parent_of_imgs { white-space-collapse: discard; }

Disadvantage, you ask? No browser has implemented this extremely useful feature (think of inline blocks in general) yet. :-(

What I did from time to time, although it's ugly as the night is dark, is to use comments:

<p><!--
  --><img src="." alt="Sample Image" /><!--
  --><img src="." alt="Sample Image" /><!--
  --><img src="." alt="Sample Image" /><!--
  --><img src="." alt="Sample Image" /><!--
--></p>

Two inline-block, width 50% elements wrap to second line

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Two inline-block elements, each 50% wide, do not fit side by side in a single row

Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.

When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).

So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Removing whitespace between HTML elements when using line breaks

You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate.

Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.

Do browsers remove whitespace in between text of any html tag

The normal behavior for the display of whitespaces is to compress them into a single one, which is then displayed.

There are two exceptions from that:

The <pre> tag, which keeps the whitespaces as entered.
Setting the CSS property white-space: pre; (respectively pre-wrap or pre-line)

Will Whitespace or Wrap Be Ignored Between Two Block Elements in HTML