Introduction
There are multiple ways to remove the space between inline – block elements !
Method 1
.apple {
.display:inline-block;
width:100px;
background:Red;
font-size:30px;
color:white;
text-align:center;
}
.orange {
.display:inline-block;
width:100px;
background:Red;
font-size:30px;
color:white;
text-align:center;
}<p>
<span> Apple <span/> <span> Orange <span/>
<p/>It’s very simple and easy way to remove whitespace between inline block elements.
Method 2
<script src = "http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<p>
<span> Apple <span/> <span> Orange <span/>
<p/>
<script>
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
<script/>But if you are using method no 2, then don’t forget to incude jquery script inside your code.
Method 3
In method 3 I am using div tag. This method is little odd but it’s working perfectly fine.
<div class="apple">
Apple</div><div class="orange">Orange
</div>Output
