Where is this space coming from between two elements?

Question

between these two p elements.

I checked the box model and there is no margin set.

Here it the fiddle and code -

<body>

<style>
#container{
  display: inline-block;
  width: 500px;
  border: solid 1px;
  text-align: center;
}
#si_but{
  cursor:  pointer;
  padding:  14px 14px;  
  font-size: 14px;
  border: solid 1px;
  margin: 0px;
  display: inline-block;
}
#su_but{
  cursor:  pointer;
  padding:  14px 14px;  
  font-size: 14px;
  border: solid 1px;
  margin: 0px;
  display: inline-block;

}
#hold_button{
  display: inline-block;
  border: solid 1px;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
}
</style>


<div id="container">
  <divi id="hold_button">
    <p id='si_but' class='blue_but   radius_left  medium_white'>SignIn</p>
    <p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
  </div>
</div>

</body>

Read: https://css-tricks.com/fighting-the-space-between-inline-block-elements/. Use `float: left` on `p`. Check [Demo](https://jsfiddle.net/tusharj/f3m2apgy/4/) — Tushar, Sep 20 '15 at 12:55
Also note that it is recommended to omit the unit for `0` lengths. — connexo, Sep 20 '15 at 13:30
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Michael Benjamin, Sep 20 '15 at 13:33

score 2 · Accepted Answer · answered Sep 20 '15 at 12:57

2

You have newline after the first </p> and indenting spaces before the second <p>.

If you put <p> elements in a line, the space will disappear.

<div id="container">
    <div id="hold_button">
        <p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
    </div>
</div>

And, <divi> should be typo of <div>.

answered Sep 20 '15 at 12:57

hata

11,633
6
46
69

answer is in the comments – cade galt Oct 21 '15 at 15:17

James Walker · Answer 2 · 2015-09-20T13:00:43.987

1

It's because all inline-block elements have a space to the left if seperated by spaces in the HTML code. To fix it, you should change them to <ul> or <div> elements, or add a negative margin to one of them.
Adding margin-left: -5px; to #su_but would also fix this, although it is a little hacky.

edited Sep 20 '15 at 13:00

answered Sep 20 '15 at 12:54

James Walker

393
1
3
11

score 1 · Answer 3 · answered Sep 20 '15 at 12:58

If you put the <p> elements on a single line in your code, the gap is eliminated.

<p id='si_but' class='blue_but   radius_left  medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>

DEMO: https://jsfiddle.net/f3m2apgy/6/

connexo · Answer 4 · 2015-09-20T13:25:14.103

0

The usual way to fix the whitespace problems coming up with display: inline-block; is to set the parent element's font-size to zero. Of course the consequence is that you will have to re-set the necessary font-size on the child elements - which you already do in your example, so

#hold_button { font-size: 0; }

fixes your problem already.

https://jsfiddle.net/f3m2apgy/7/

edited Sep 20 '15 at 13:25

answered Sep 20 '15 at 13:04

connexo

53,704
14
91
128

Where is this space coming from between two elements?

4 Answers4