Delete White Space Between Divs

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 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.

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 get rid of space between divs when display inline-block and stacked horizontally?

This is caused by the fact your browser will render the DIV's inline and as with words, they are separated by spaces.

The width of the space is determined by the font-size, hence an easy trick is to set the font-size of your containing element to 0 and then reset the font-size in your inline divs.

#container { font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

I have demonstrated this in this Fiddle.

Take a look at this article for more info.

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">

to

<!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 delete white space between two div element when they display as inline-block

inline-block leaves white-space between elements.

Write elements on same line to avoid white-space.

Change

<div id="left">
    left other elements goes here
</div>
<div id="center">
    center other elements goes here
</div>

to

<div id="left">
    left other elements goes here
</div><div id="center">
    center other elements goes here
</div>

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 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

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

remove space between divs

Why is there a space between the two div tags?

You can read more about it in Fighting the Space Between Inline Block Elements

To remove the undesired blank space, set font-size: 0 in the .row element, and then restore the font-size in the .item.

.row {
    font-size: 0;
}

.item {
    font-size: 12px;
}

Since your margins are using the the em unit, if you simple set the font-size: 0 in the wrapper element, your margins will disappear aswell.

To keep your margins, it's important to restore the font-size in the inner element or set the margins using another unit that is not based on the font-size, like px.

Following is an example:

.row {  background-color: red;  margin: 2em 0;  display: block;  text-align: center;  white-space: nowrap;  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;  box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;  font-size: 0;}.item {  font-size: 12px;  background-color: silver;  width: 50%;  white-space: normal;  display: inline-block;}.sub-item {  background-color: royalblue;  margin: .5em;  width: 100px;  height: 100px;  text-align: center;  display: inline-block;}

<div class='row'>  <div class="item">    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>  </div>  <div class="item">    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>    <div class="sub-item"></div>  </div></div>

---

Related Topics