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

Attempting to use jQuery on click to set the background image of a div to a base64 encoded data image

Prevent access to website during execution of background tasks

Is there a method to generate an endless carousel effect?

Tips for styling a button upon being clicked

What is the best way to remove CSS styling from a select element?

Instructions for creating a background within a container and positioning text in the center of the image utilizing HTML and CSS

In React development, a div (button) is visible, but in the production build, it becomes hidden from

Incorporating CSS into React.js applications

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

CSS transformation on the go

The moving div suddenly halts before continuing its journey

The functionality of my website is currently experiencing difficulties when accessed through the Android UC Browser

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

Achieving Dynamic Center Alignment for One or Two DIVs

Creating a stylish Bootstrap 5 table featuring a large PRE block in a cell that is scrollable

Utilizing an overlay to conceal both the body content and the input fields

CSS from the parent page is not being applied to AJAX-injected content

What causes the sub-menus to move even when they are set to position: absolute?

Significant distance between the content and the footer section of the page

Guide to aligning a WordPress div to the top of the webpage