{"id":1764,"date":"2017-03-22T20:06:12","date_gmt":"2017-03-22T14:36:12","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1764"},"modified":"2017-03-28T18:31:35","modified_gmt":"2017-03-28T13:01:35","slug":"css-html-remove-space-inline-block-elements","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/css-html-remove-space-inline-block-elements\/","title":{"rendered":"[Solved &#8211; 11 Answers] CSS &#8211; HTML -How to remove the space between inline-block elements"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<ul>\n<li>Given this HTML &amp; CSS:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">span <br\/>{ <br\/>    display:inline-block;<br\/>    width:100px;<br\/>}<br\/>&lt;p&gt;<br\/>    &lt;span&gt; wiki &lt;\/span&gt;<br\/>    &lt;span&gt; techy &lt;\/span&gt;<br\/>&lt;\/p&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p>as a result, there will be a 4px wide space between the SPAN elements.<\/p>\n<ul>\n<li>We could get rid of that space by removing the white-space between the SPAN elements in the HTML source code:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;p&gt;<br\/>    &lt;span&gt; wiki &lt;\/span&gt;&lt;span&gt; techy &lt;\/span&gt;<br\/>&lt;\/p<\/code><\/pre> <\/div>\n<ul>\n<li>In JavaScript &#8211; by removing the Text nodes from the container element (the paragraph), will be shown like this:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">JAVASCRIPT CODE<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">\/\/ jQuery<br\/>$(&#039;p&#039;).contents().filter(function() { return this.nodeType === 3; }).remove();<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>Add comments between elements NOT to have a white space.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div&gt;<br\/>    Element 1<br\/>&lt;\/div&gt;&lt;!--<br\/>--&gt;&lt;div&gt;<br\/>    Element 2<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Use flexbox :<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">ul <br\/>{<br\/>    display: -webkit-box;<br\/>    display: -moz-box;<br\/>    display: -ms-flexbox;<br\/>    display: -webkit-flex;<br\/>    display: flex;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Add display: flex; to the parent element.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">p {<br\/>  display: -webkit-box;<br\/>  display: -webkit-flex;<br\/>  display: -ms-flexbox;<br\/>  display: flex;<br\/>}<br\/>span <br\/>{<br\/>  float: left;<br\/>  display: inline-block;<br\/>  width: 100px;<br\/>  background: blue;<br\/>  font-size: 30px;<br\/>  color: white;<br\/>  text-align: center;<br\/>}<br\/>&lt;p&gt;<br\/>  &lt;span&gt; wiki &lt;\/span&gt;<br\/>  &lt;span&gt; techy &lt;\/span&gt;&lt;\/p&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<h4 id=\"simple\"><span style=\"color: #008000;\"><b>simple:<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">item <br\/>{<br\/>  display: inline-block;<br\/>  margin-right: -0.25em;<br\/>}<\/code><\/pre> <\/div>\n<ul>\n<li>no need to touch parent element.<\/li>\n<li>Only condition here: the item&#8217;s font-size must not be defined (must be equal to parent&#8217;s font-size).<\/li>\n<li>0.25em is the default word-spacing<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>This is one of the solution :<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">p <br\/>{<br\/>  display: flex;<br\/>}<br\/>span <br\/>{<br\/>  float: left;<br\/>  display: inline-block;<br\/>  width: 100px;<br\/>  background: green;<br\/>  font-size: 30px;<br\/>  color: orange;<br\/>}<br\/>&lt;p&gt;<br\/>  &lt;span&gt;hi wikitechy &lt;\/span&gt;<br\/>  &lt;span&gt; hello wikitechy&lt;\/span&gt;<br\/>&lt;\/p&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>If you want to make two pinkspan without a gap or other white-space, but if you want to remove the gap,<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">span <br\/>{ <br\/>    display:inline-block;<br\/>    width:100px;<br\/>    background:pink;<br\/>    font-size:30px;<br\/>    color:white; <br\/>    text-align:center;<br\/><br\/>    float:left;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Can try the flexbox and apply the code below and the space will be removed.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">p <br\/>{<br\/>   display: flex;<br\/>   flex-direction: row;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;ul class=&quot;items&quot;&gt;<br\/>   &lt;li&gt;Item 1&lt;\/li&gt;&lt;?php<br\/> ?&gt;&lt;li&gt;Item 2&lt;\/li&gt;&lt;?php<br\/> ?&gt;&lt;li&gt;Item 3&lt;\/li&gt;<br\/>&lt;\/ul&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<h4 id=\"css-solution\"><span style=\"color: #800000;\">CSS solution :<\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">span <br\/>{<br\/>    display: table-cell;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<p>Add\u00a0 white-space: nowrap to the container element ;<\/p>\n<h4 id=\"css\"><span style=\"color: #000000;\"><b>css<\/b><b> :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">     * <br\/>{<br\/>          box-sizing: border-box;      <br\/>}<br\/>     .row <br\/>{ <br\/>           vertical-align: top;<br\/>          white-space: nowrap;       <br\/> }<br\/>     .column<br\/>{ <br\/>           float:left ; <br\/>           display:inline-block ; <br\/>           width:50% \/\/ or whatever in your case     <br\/> }<\/code><\/pre> <\/div>\n<h4 id=\"html\"><span style=\"color: #000000;\"><b>Html :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML CODE<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;row&quot;&gt;<br\/>    &lt;div class=&quot;column&quot;&gt; Hello Wikitechy&lt;\/div&gt;<br\/>    &lt;div class=&quot;column&quot;&gt;Wikitechy technology forum&lt;\/div&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 11:<\/label><\/p>\n<ul>\n<li>Remove the spaces from Inline Block Elements there are many method:<\/li>\n<\/ul>\n<h4 id=\"negative-margin\"><span style=\"color: #000000;\"><b>Negative margin<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">CSS CODE<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div a <br\/>{ <br\/>display: inline - block; margin - right: -4 px; <br\/>}<\/code><\/pre> <\/div>\n<h4 id=\"font-size-to-zero\"><span style=\"color: #000000;\"><b>font size to zero<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">nav <br\/>{<br\/> font - size: 0; <br\/>}<br\/> nav a <br\/>{<br\/> font - size: 16 px; <br\/>}<\/code><\/pre> <\/div>\n<h4 id=\"skip-the-closing-tag\"><span style=\"color: #000000;\"><b>Skip the closing tag<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt; ul &gt; &lt; li &gt; one &lt; li &gt; two &lt; li &gt; three &lt; \/ul&gt;<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: Given this HTML &amp; CSS: [ad type=&#8221;banner&#8221;] as a result, there will be a 4px wide space between the SPAN elements. We could get rid of that space by removing the white-space between the SPAN elements in the HTML source code: In JavaScript &#8211; by removing the Text nodes from the container element (the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[3807,3805,3808,3811,3812,3798,3802,3804,3803,3810,3809,3801,3799,3800,3806],"class_list":["post-1764","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-add-space-between-inline-block","tag-another-way-to-kill-space-between-inline-blocks","tag-css-remove-white-space-between-divs","tag-css-remove-whitespace-in-text-css-space-between-list-items-horizontally","tag-css-space-between-elements","tag-fighting-the-space-between-inline-block-elements","tag-how-to-remove-the-space-between-inline-block-elements-in-css","tag-html-how-to-add-space-between-inline-block-elements","tag-html-how-to-remove-the-space-between-inline-block-elements","tag-inline-block-margin-top","tag-remove-space-between-li","tag-remove-whitespace-between-inline-block-elements","tag-removing-gaps-between-inline-and-inline-block-elements","tag-ways-to-handle-space-between-inline-block-elements","tag-white-space-collapse"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1764"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1764\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}