Delete white space between divs

Question

I'm getting some strange whitespace between two divs I have.

Each div has the css property display: inline-block and each have a set height and width.

I cannot find where the whitespace is.

Thomas Clayson · Accepted Answer · 2015-07-13T15:50:31.560

26

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.

edited Jul 13 '15 at 15:50

answered Mar 04 '12 at 13:30

Thomas Clayson

29,657
26
147
224

Don't worry, I'm restoring the balance for you. :) – AlexKempton Mar 04 '12 at 17:01
Nowadays %widths and height are preferred for your website to work perfectly on all devices. – Ali Mohyudin Jul 11 '15 at 01:41
1

Edited. My comment (made almost 4 years ago) was made at a time when "liquid layout" was a poor design choice. Nowadays % width/height works well for responsive web design. – Thomas Clayson Jul 13 '15 at 15:52
you sir are a legend !! – Mehdi Souregi Oct 30 '18 at 21:27

score 23 · Answer 2 · answered Mar 04 '12 at 13:32

23

Use:

float:left;
clear:none;

In both div

answered Mar 04 '12 at 13:32

check123

1,989
2
22
28

fuzzysearch · Answer 3 · 2014-05-28T09:16:51.350

11

If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...

<div id="leftSide">Some content here</div><div id="rightSide">Some more content here</div>

edited May 28 '14 at 09:16

answered May 10 '14 at 14:42

fuzzysearch

846
9
15

score 6 · Answer 4 · answered Mar 12 '14 at 18:46

6

Only add this to your CSS

h1 {
    padding:0;
    margin:0;
   }

Space between div is only due to h1 Margin and Padding

answered Mar 12 '14 at 18:46

user3170223

69
1
3

If you have two divs without padding and margin one near another there are two cases: a) if the html is minimzed (no space between tags) then the divs will be adjacent. b) if there is a single space/tab/enter then the browser shows a small space between those divs. Your answer does not respond user's question. I made time to write a small explanation so you might understand the difference. Kudos! – besciualex Aug 07 '20 at 19:52
Just `margin: 0;` seems to work in most cases. No need for `padding:0;` unless that element already has padding. – kmoser Sep 29 '22 at 17:25

score 5 · Answer 5 · answered Jun 11 '19 at 11:29

5

You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.

answered Jun 11 '19 at 11:29

dodov

5,206
3
34
65

2

Since the question relates to `display: inline-block` I would rather suggest `display: inline-flex`. – Sunny Jul 21 '19 at 19:08
I second that, @Sunny – Carl Edwards Mar 12 '20 at 13:56

score 5 · Answer 6 · answered Mar 04 '12 at 13:31

This does the trick:

<div id="left_side">
    ...
</div><div id="right_side">
    ...
</div>

Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.

Demo.

score 2 · Answer 7 · answered May 28 '20 at 21:34

2

best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)

answered May 28 '20 at 21:34

gdarcan

595
5
8

score 1 · Answer 8 · answered Mar 04 '12 at 13:30

1

Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.

http://jsfiddle.net/RVAQp/3/

answered Mar 04 '12 at 13:30

AlexKempton

1,648
15
28

This, of course, is another option. Though it should be noted the floated elements should be cleared. – Purag Mar 04 '12 at 13:32
Good points, but really doesn't answer the OP's question. This is really a comment that should go on the question, rather than an answer. – Thomas Clayson Mar 04 '12 at 13:34
You're completely right, I sort of missed the point with this one. – AlexKempton Mar 04 '12 at 17:03

score 1 · Answer 9 · answered Mar 04 '12 at 13:30

1

Move these statements onto the same line:

</div><div id="right_side">

answered Mar 04 '12 at 13:30

Derek Tomes

3,989
3
27
41

score 0 · Answer 10 · answered Jul 24 '13 at 04:54

0

Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:

#left_side {float: left;}

and

#right_side {float: right; margin-right: 10%}

No apparent problems. Could be wrong.

answered Jul 24 '13 at 04:54

user2613041

43
1
8

1

Floats and inline-blocks (as well as table-cells and flexible boxes) are fundamentally different things. All four techniques *may be* suitable for horizontal alignment of items, but they have different limitations and downsides. In theory, flexboxes seem to be the most universal way of the four, but browsers support of the latest spec version is still rather limited. – Ilya Streltsyn Jul 24 '13 at 05:23

score 0 · Answer 11 · answered Mar 18 '17 at 02:06

0

Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.

answered Mar 18 '17 at 02:06

Rajesh Kannojiya

37
1
4

score 0 · Answer 12 · answered Mar 19 '21 at 12:53

0

Parent div set to font-size: 0px and chiilds to wanted size like 17px :)

answered Mar 19 '21 at 12:53

Gavo

21
3

Delete white space between divs

12 Answers12

Linked

Related