What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

Question

What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

Consider the following HTML markup:

<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>

Accompanied by this CSS style: .inlineblock{ display: inline-block; }

You may notice spaces between the elements when rendered, approximately 4px of space. The spacing can be eliminated if your markup is written like this:

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

The question that arises is: WHY?

What is the underlying technical reason that popular browsers such as Firefox, Chrome, and Opera still exhibit this behavior? Is there a specific rationale behind it, preventing it from being rectified despite advancements in browser technology?

We appreciate any insights on this matter!

css

Answer 1

Answer №1

Performing in this manner is precisely what is expected of them.

The gaps between inline elements are indistinguishable from the spaces between words.

If you wish to avoid this, opt for block elements or adjust the font size to zero.

Answer 2

Performing in this manner is precisely what is expected of them.

The gaps between inline elements are indistinguishable from the spaces between words.

If you wish to avoid this, opt for block elements or adjust the font size to zero.

Answer 3

Answer №2

Ah, it seems like those gaps are intentional!

To address this, consider applying the CSS rule font-size: 0 to the container element.

Answer 4

Ah, it seems like those gaps are intentional!

To address this, consider applying the CSS rule font-size: 0 to the container element.

Answer 5

Answer №3

Instead of setting the font size to zero to remove white space, a more effective method is to use word-spacing:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>

section {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

div {
    width: 100px;
    height: 40px;
    background: #e7e7e7;
    padding: 10px;
    display:inline-block;
    word-spacing:0; /* reset from parent*/
}

</style>
</head>
<body>
<section>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</section>
</body>
</html>

Answer 6

Instead of setting the font size to zero to remove white space, a more effective method is to use word-spacing:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<style>

section {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

div {
    width: 100px;
    height: 40px;
    background: #e7e7e7;
    padding: 10px;
    display:inline-block;
    word-spacing:0; /* reset from parent*/
}

</style>
</head>
<body>
<section>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</section>
</body>
</html>

Answer 7

Answer №4

Here is the resolution.

   <style>
    * {
    border:0;
    margin:0;
    padding:0;
    box-shadow:0 0 1px 0px silver;
    }
    .foo {
    width: 100%;
    }
    .bar {
    width: 50%;
    float:left;
    text-align: center;
    }
    </style>
    <div class="foo">
        <div class="bar">
            ...a brand-new client
        <!-- the whitespace between the following divs affects rendering - why? -->
        </div> <div class="bar">
            ...an established customer
        </div>
    </div>

Answer 8

Here is the resolution.

   <style>
    * {
    border:0;
    margin:0;
    padding:0;
    box-shadow:0 0 1px 0px silver;
    }
    .foo {
    width: 100%;
    }
    .bar {
    width: 50%;
    float:left;
    text-align: center;
    }
    </style>
    <div class="foo">
        <div class="bar">
            ...a brand-new client
        <!-- the whitespace between the following divs affects rendering - why? -->
        </div> <div class="bar">
            ...an established customer
        </div>
    </div>

What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to align HTML elements in a single row?

ReactJS Application: Issue with Selective Mobile Scrolling

Tips for Removing Padding in Material UI Container Component

Issues with the animation of letters bouncing in css3

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

The bottom portion of my page vanishes without a

Styling an HTML table with two columns: one column displaying an image, and the other column containing information related to the image

python conducting automation tests with Selenium WebDriver on a mouse

What are the steps to employ a query string to display a specific image?

Tips for centering text inside a div using a separator

Optimal arrangement for z-index and opacity

In IE8, dynamically loaded CSS does not take effect on dynamically loaded JavaScript views

Morris.js tutorial: Enhancing bar charts with data labels

Using HTML and CSS to create a line break between div elements

Having difficulty adding spacing between the border and the content of a label

Combine jQuery and CSS to create a scrollable and extended fixed header

Expanding Issue with Bootstrap Navigation

What steps can be taken to create a curved bottom for the header section?

Discovering descendant div elements

How come a child element with a lower z-index than its parent doesn't appear behind the parent?