What has caused the space between these articles?

Question

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles:

This is my HTML code:

<section id="home">

 <article>
<h1>Overview</h1>
 </article>
 <article>
<h1>People</h1>
 </article>
 <article>
<h1>Links</h1>
 </article>

 </section>

And this is my CSS code:

section {
    width: 87%;
    margin: 0px auto;
 }

article {
    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
 }

html css

Answer 1

Answer №1

Consider replacing the inline-block with block and incorporate float:left. Check out this demo on JSFiddle

JSFIDDLE DEMO

Answer 2

Consider replacing the inline-block with block and incorporate float:left. Check out this demo on JSFiddle

JSFIDDLE DEMO

Answer 3

Answer №2

There is some unnecessary whitespace in between the display:inline-block elements. A simple solution is to remove them, like this:

<section id="home">
    <article><h1>Overview</h1></article><!--
    --><article><h1>People</h1></article><!--
    --><article><h1>Links</h1></article>
</section>

Alternatively:

<section id="home">
    <article><h1>Overview</h1></article><article><h1>People</h1></article><article><h1>Links</h1></article>
</section>

JSFiddle link

Another option is to add font-size:0; to the parent container, as shown in this example.

Answer 4

There is some unnecessary whitespace in between the display:inline-block elements. A simple solution is to remove them, like this:

<section id="home">
    <article><h1>Overview</h1></article><!--
    --><article><h1>People</h1></article><!--
    --><article><h1>Links</h1></article>
</section>

Alternatively:

<section id="home">
    <article><h1>Overview</h1></article><article><h1>People</h1></article><article><h1>Links</h1></article>
</section>

JSFiddle link

Another option is to add font-size:0; to the parent container, as shown in this example.

Answer 5

Answer №3

Your browser automatically includes spaces.

An effective solution for this issue is to apply font-size:0 to the parent container and then assign a suitable font size to the child elements.

To address your specific situation, follow these steps:

section {
    font-size: 0;     //Should be set to zero
}

article {
    font-size: 10px;  //Can be adjusted as needed

    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}

Answer 6

Your browser automatically includes spaces.

An effective solution for this issue is to apply font-size:0 to the parent container and then assign a suitable font size to the child elements.

To address your specific situation, follow these steps:

section {
    font-size: 0;     //Should be set to zero
}

article {
    font-size: 10px;  //Can be adjusted as needed

    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}

Answer 7

Answer №4

When you have any two inline or inline-block elements in your markup, they will be displayed with a white space between them, regardless of how many spaces or new lines separate them.

For instance, if you have these 3 divs, the output will still be hello world:

<div>hello world</div>

<div>hello
world</div>

<div>

   hello


       world
</div>

This behavior occurs because the text nodes inside are treated as inline.

If you want to avoid this spacing issue, ensure that the opening <article> tag immediately follows the closing </article> tag:

<section id="home">
 <article>
<h1>Overview</h1>
 </article><article>
<h1>People</h1>
 </article><article>
<h1>Links</h1>
 </article>

 </section>

Check out this jsFiddle for reference.

In situations where you don't want the default whitespace, such as wanting 'helloworld' instead of 'hello world', simply remove the extra spaces in your HTML markup between the words.

Answer 8

When you have any two inline or inline-block elements in your markup, they will be displayed with a white space between them, regardless of how many spaces or new lines separate them.

For instance, if you have these 3 divs, the output will still be hello world:

<div>hello world</div>

<div>hello
world</div>

<div>

   hello


       world
</div>

This behavior occurs because the text nodes inside are treated as inline.

If you want to avoid this spacing issue, ensure that the opening <article> tag immediately follows the closing </article> tag:

<section id="home">
 <article>
<h1>Overview</h1>
 </article><article>
<h1>People</h1>
 </article><article>
<h1>Links</h1>
 </article>

 </section>

Check out this jsFiddle for reference.

In situations where you don't want the default whitespace, such as wanting 'helloworld' instead of 'hello world', simply remove the extra spaces in your HTML markup between the words.

Answer 9

Answer №5

When it comes to display inline block, it's essentially an inline element with block properties. This means that if there is any white space or line breaks between elements, it will create gaps.

To avoid these gaps and ensure compatibility with older browsers, I recommend using display: block and float: left instead. If you still prefer to use inline-block, make sure to remove any white space so that the tags of the elements are directly adjacent to each other.

For more information on display:inline-block, check out this article:

Answer 10

When it comes to display inline block, it's essentially an inline element with block properties. This means that if there is any white space or line breaks between elements, it will create gaps.

To avoid these gaps and ensure compatibility with older browsers, I recommend using display: block and float: left instead. If you still prefer to use inline-block, make sure to remove any white space so that the tags of the elements are directly adjacent to each other.

For more information on display:inline-block, check out this article:

What has caused the space between these articles?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Modify the appearance of the PrimeReact navigation bar

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

Tips for getting the DIV:hover effect to work in Internet Explorer 8

an occurrence of an element being rendered invisible, within an instance of an element being rendered as flexible,

Issue with Trix text editor not triggering the change event

Adaptive search bar and components housed within a casing

Troubleshooting a unique CSS problem on an Android PhoneGap

Eliminating the 'white-space' surrounding concealed images

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

What's the best way to modify HTML element classes using Javascript?

Transforming table headers in Rmarkdown ioslides

Strategies for optimizing PPI and DPI in responsive design

Issue with maintaining fixed space above navbar in HTML/CSS code

Start fresh with the count for every individual table

HTML5 Video Frozen in Place on Screen's Edge

What causes an iframe to scroll horizontally when scaled?

What is the process for including echo HTML field in the WooCommerce order view?

Fetching dynamic information via AJAX for a jQuery tooltip

What is the method to extract div text using Python and Selenium?

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not