CODEWITHSUNDEEP
htmlcss
cade galt
cade galt

Reputation: 4181

Where is this space coming from between two elements?

between these two p elements.

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

Here it the fiddle and code -

https://jsfiddle.net/f3m2apgy/

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

Upvotes: 0

Views: 63

Answers (4)

connexo
connexo

Reputation: 56823

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/

Upvotes: 0

James Walker
James Walker

Reputation: 403

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.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372174

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/

Upvotes: 1

hata
hata

Reputation: 12523

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

Upvotes: 2

Related Questions