The gap between two inline-block span element
CSS:
span {
display: inline-block;
}
HTML:
<span>This will have</span>
<span>a gap between the elements</span>
<span>This won't have</span><span>a gap between the elements</span>
How to remove the space between inline/inline-block elements?
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Since this answer has become rather popular, I'm rewriting it significantly.
Let's not forget the actual question that was asked:
How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
Most of the possible issues with relative font sizes are not complicated to fix.
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can do this, as I usually do:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
Or, this:
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>Or, use comments:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>Or, if you are using using PHP or similar:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.
Vertical space between two inline-block and a block element
The other answers provide solutions, but not the why this happens:
Some given funny joke
-----^---------^-^
In that string I've marked three characters. Those three have so called 'decenders' (e.g.: the loop under the G, the legs under the Y and J).
When you declare something inline-block, it gets the properties of both block and inline elements. The inline elements are often text (e.g. a or span), thus have decenders, thus your div has room for decenders.
This is why setting line-height:0; font-size:0; does the trick.
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>Add Spacing Between Two Inline-Block Elements
First add position: relative to .center to correctly position the button with absolute positioning.
And add this ruleset for .btn.btn-info.btn-md selector:
top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;
.btn.btn-info.btn-md {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
height: 40px;
margin: auto auto auto 50px;
}
.btn.btn-info.btn-md:active {
background: #104723;
border-color: #104723;
border-radius: 3px;
float: right;
display: inline-block;
position: absolute;
margin-right: -40px;
}
.pageheadh {
font-size: 30px;
font-weight: bolder;
color: black;
text-align: center;
display: inline-block;
}
.pageheadp {
text-align: center;
color: black;
font-weight: bold;
}
.center {
align-items: baseline;
justify-content: center;
text-align: center;
padding-right: 10px;
position: relative;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<div class="center">
<h3 class="pageheadh">Fitness Tracker</h3>
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">Prize Plaza</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p class="pageheadp">Click on any of the tabs to track your progress in that category.</p>
<!--<input type="text" class="global_filter" id="global_filter">-->
<div class="clearfix"></div>
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Weekly Weight Δ</a></li>
<li><a href="#2" data-toggle="tab">Total Weight Δ</a></li>
<li><a href="#3" data-toggle="tab">Weekly Steps</a></li>
<li><a href="#4" data-toggle="tab">Total Steps</a></li>
<li><a href="#5" data-toggle="tab">Weekly Minutes</a></li>
<li><a href="#6" data-toggle="tab">Total Minutes</a></li>
<li><a href="#7" data-toggle="tab">Step Points</a></li>
<li><a href="#8" data-toggle="tab">Exercise Points</a></li>
<li><a href="#9" data-toggle="tab">Weekly Winners</a></li>
</ul>how to remove the white space between two span tags?
Update Css
.left-top-text {
display: inline-block;
padding-top: 6px;
font-size: 30px;
white-space: nowrap;
margin-left: -5px;
}
Snippet Example
.side-bar{ background-color: red; } @media (min-width: 768px){ .side-bar{ z-index:10; position:absalute; width:220px; /*padding-top:60px;*/ height:100%; /*top:0;*/ position:fixed;
} } @media (min-width: 768px){ .top-left-part{ width:220px; position:fixed; z-index: 11; /*top: 0;*/ height: 60px; } } /*---------------top left part starts here------------*/ .top-left-part{ width:220px; float:left; background-color: #ffffff; /*padding-top: 60px;*/ } .top-left-image{ float: left; height: 40px; width: 50px; padding-left: 1.3px; padding-right: 10px; padding-top: 2.7px; } .left-top-text { display: inline-block; padding-top: 6px; font-size: 30px; white-space: nowrap; margin-left: -5px; } .text-elite{ font-weight: 600; } .text-admin{ padding-left: -5px; } /*---------------top left part ends here-------------*/ /*---------------top-right part starts here----------*/ .top-right-part{ top: 0 !important; background-color:#4F5467; width:100%; height:60px; right: 0; } .arrow-left{ color: white; } /*---------------top right part ends here-------------*/<html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/elite.css" type="text/css"> <script src="js/elite.js"> </script> </head> <body> <div id="top-bar"> <div class="top-left-part"> <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span> <span class="left-top-text text-elite">elite </span> <span class="left-top-text text-admin">admin</span> </div> <div class="top-right-part"> <span class="arrow-left fa-arrow-left"> </span> </div> </div> <div id="bottom-part"> <div id="left-side-bar" class="side-bar">
</div> <div id="right-side-container"> </div> </div> </body></html>Space between inline-block and inline element
When an inline element's boundary lies between two spaces the space that follows the boundary (outside the inline element) is removed, leaving the space within the inline element. In your case, the space that is trimmed off is the newline that separates your span elements. From the spec:
For each inline element (including anonymous inline elements), the following steps are performed, treating bidi formatting characters as if they were not there:
- If 'white-space' is set to 'normal', 'nowrap', or 'pre-line',
- any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.
Note that this is only the case with inline boxes, i.e. display: inline elements — not inline-blocks. Appending a space to the content of your inline-block element will not cause the space after it to be collapsed away.
The height difference mainly has to do with how the height of inline elements vs inline-blocks is calculated, which is an entire topic in itself. See sections 10.6.6 and 10.8.1 of the spec.
How to add space between inline-block elements?
Maybe this will help you
<html><head>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px;
font-size: 0;
}
#main {
max-width: 452px;
margin: 0 auto;
}
.item {
display: inline-block;
width: 150px;
}
.item1 {
display: inline-block;
width: 150px;
padding:0px 4px;
}
.item img {
width: 200px;
}
.clearfix {
overflow: auto;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="main">
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</a>
</li>
<li class="item1 clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</a>
</li>
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</div>
</a>
</li>
</div>
</body></html>
Alignment off: A gap between inline-block elements with nothing in it
Add this;
.home-container #membership-plans {
float:left;
}
It will make the space between the element the same as the rest of your elements. It was just being pushed to the left previously by the other a's you've used. With the added code the element is supposed to be left and that's why it fixed your spacing issue.
https://jsfiddle.net/8b779myb/
Vertical gaps between inline-block elements for big amounts of elements
Inline boxes inherit inheritable properties from their block parent box. therefore your grids are taking line-height of .container. When .container is overflowed vertical-align: top; stops working, so it's better to use line-height:0; to parent element (.container).
Source: https://www.w3.org/TR/CSS2/visuren.html#inline-boxes
$(document).ready(function() { createGrid(48); $(".cell").mouseenter(function() { $(this).css("background-color", "green"); }); $(".cell").mouseleave(function() { $(this).css("background-color", "white"); });});
function createGrid(n) { var container = $(".container"); container.empty();
var sizeP = 100 / n;
var cell = $('<div/>', { class: 'cell', style: 'width: ' + sizeP + '%; height: ' + sizeP + '%;' });
for(i = 0; i < n*n; i++) { container.append(cell.clone()); }}.container { border: 5px solid black; border-radius: 5px; padding: 10px; margin: 10px; width: 800px; height: 800px; line-height:0;}
.cell { display: inline-block; box-sizing: border-box; border: 1px solid black; vertical-align: top;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><body> <div class="container"></div></body>Related Topics
Position:Sticky Is Not Working
Using Nth-Child in Tables Tr Td
Two HTML Tables Side by Side, Centered on the Page
How to Use SCSS/Sass to Increase Animation-Delay for Concurrent Divs
What Is the Regex of a CSS Selector
CSS Relative + Right (Or Bottom) Almost Never Work
Why Do I Get the Error Message "Element 'Style' Cannot Be Nested Within Element 'Style'"
Css3 Animation - Smooth Infinite Cycle
CSS Issue on iPad with Table Border
How to Align Jsf Components to Center
Safari Font-Weight Issue , Text Too Bold
Google Chrome Not Respecting Z-Index
How to Vertically Align Text Next to a Floated Image