Remove "Whitespace" Between Div Element

Why is there an unexplainable gap between these inline-block div elements?

In this instance, your div elements have been changed from block level elements to inline elements. A typical characteristic of inline elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)

There are a few solutions that can be used to solve this.

Method 1 - Remove the whitespace from the markup

Example 1 - Comment the whitespace out: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Example 2 - Remove the line breaks: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Example 3 - Close part of the tag on the next line (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Example 4 - Close the entire tag on the next line: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Method 2 - Reset the `font-size`

Since the whitespace between the inline elements is determined by the font-size, you could simply reset the font-size to 0, and thus remove the space between the elements.

Just set font-size: 0 on the parent elements, and then declare a new font-size for the children elements. This works, as demonstrated here (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size is declared using em units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline elements.

Method 3 - Set the parent element to `display: flex`

In some cases, you can also set the display of the parent element to flex. (example)

This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {

    display: flex;

}

.parent > div {

    display: inline-block;

    padding: 1em;

    border: 2px solid #f00;

}

<div class="parent">

    <div>text</div>

    <div>text</div>

    <div>text</div>

    <div>text</div>

    <div>text</div>

</div>

How to remove white space between div elements

h1, h2, p {
    margin: 0;
}

Browser adds margins on heading elements and paragraphs by default. You remove it via CSS.

Remove whitespace between div element

The cleanest way to fix this is to apply the vertical-align: top property to you CSS rules:

#div1 div {
   width:30px;height:30px;
   border:blue 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
}

If you were to add content to your div's, then using either line-height: 0 or font-size: 0 would cause problems with your text layout.

See fiddle: http://jsfiddle.net/audetwebdesign/eJqaZ/

Where This Problem Comes From

This problem can arise when a browser is in "quirks" mode. In this example, changing the
doctype from:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

will change how the browser deals with extra whitespace.

In quirks mode, the whitespace is ignored, but preserved in strict mode.

References:

html doctype adds whitespace?

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

How to remove space between div elements?

There is a gap because div is block element, if you want to remove the gap between div use display: inline-block to remove it.

body > div { display: inline-block; }

This will display an element as an inline-level block container. Please refer to CSS Display

Remove white space between div blocks

You could also remove the display: inline-block from the CSS and add float: left:

.accordion: after {
    clear: both;
}

.accordionitem {
    background-color: green;
    float: left;
}

Fiddle.

How can I remove white space between divs?

The <ul> element is part of the problem. You should add this style to it

.AMSI {
    margin-bottom: 0;
    padding-bottom: 0;
}

this by itself does not fix it. However, there is a stray <p></p> on the page, just after this <ul> element.

You should remove this <p> tag (assuming it's empty because you are not using it.)
This <p> tag has a margin-bottom of 1rem which is causing the white space

Delete white space between divs

You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.

You have:

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

Change for:

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

However, this is a bad way to do what you want to do.

You should float the elements if thats what you want to do.

How to remove space between divs?

try Reset CSS

demo

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Remove “whitespace” between 2 div element under one another

.div-1{
    display: block;
    width: 100%;
    background-color: #deb887;
    margin: 0 auto;
    height: auto;
}

.div-2 {
    height: 10px;
    vertical-align: top;
    background-color: #87ceeb;
    margin: 0 auto;
    width: 100%;
    padding: 32px 0;
    text-align: center;
}

How To Remove Vertical White Space between divs

Give margin:0; to .g1 h2, .g2 h2, .g3 h2. because h2 have default margin.

.h1z1{

  text-align: center;

}

.g1 h2, .g2 h2, .g3 h2{

  padding: 10px;

  background-color: #ccffcc;

  margin:0;

}

.g1, .g2, .g3{

  border-left: 6px solid #00ff00;

}

<body style="font-family: 'Source Code Pro', monospace;">

  <div class="header"></div>

  <div class="gtitle">

    <h1 class="h1z1">Graphics Cards</h1>

    <hr />

  </div>

  <div class="g1">

    <h2>Titan XP</h2>

  </div>

  <div class="g2">

    <h2>Titan X (Pascal)</h2>

  </div>

  <div class="g3">

    <h2>GeForce GTX 1080ti</h2>

  </div>

</body>

Remove "Whitespace" Between Div Element

Why is there an unexplainable gap between these inline-block div elements?

Method 1 - Remove the whitespace from the markup

Method 2 - Reset the `font-size`

Method 3 - Set the parent element to `display: flex`

How to remove white space between div elements

Remove whitespace between div element

Where This Problem Comes From

How to remove space between div elements?

Remove white space between div blocks

How can I remove white space between divs?

Delete white space between divs

How to remove space between divs?

Remove “whitespace” between 2 div element under one another

How To Remove Vertical White Space between divs

Related Topics

Leave a reply

Why is there an unexplainable gap between these inline-block div elements?

Method 1 - Remove the whitespace from the markup

Method 2 - Reset the font-size

Method 3 - Set the parent element to display: flex

How to remove white space between div elements

Remove whitespace between div element

Where This Problem Comes From

How to remove space between div elements?

Remove white space between div blocks

How can I remove white space between divs?

Delete white space between divs

How to remove space between divs?

Remove “whitespace” between 2 div element under one another

How To Remove Vertical White Space between divs

Related Topics

Leave a reply

Method 2 - Reset the `font-size`

Method 3 - Set the parent element to `display: flex`