{"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 & CSS:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dspan%20%0A%7B%20%0A%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20width%3A100px%3B%0A%7D%0A%3Cp%3E%0A%20%20%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%0A%20%20%20%20%3Cspan%3E%20techy%20%3C%2Fspan%3E%0A%3C%2Fp%3E%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dcss\u201d manual=\u201d%3Cp%3E%0A%20%20%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%3Cspan%3E%20techy%20%3C%2Fspan%3E%0A%3C%2Fp\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>In JavaScript \u2013 by removing the Text nodes from the container element (the paragraph), will be shown like this:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%2F%2F%20jQuery%0A%24(\u2018p\u2019).contents().filter(function()%20%7B%20return%20this.nodeType%20%3D%3D%3D%203%3B%20%7D).remove()%3B%0A\u201d message=\u201dJAVASCRIPT CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%3E%0A%20%20%20%20Element%201%0A%3C%2Fdiv%3E%3C!\u2013%0A\u2013%3E%3Cdiv%3E%0A%20%20%20%20Element%202%0A%3C%2Fdiv%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Use flexbox :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dul%20%0A%7B%0A%20%20%20%20display%3A%20-webkit-box%3B%0A%20%20%20%20display%3A%20-moz-box%3B%0A%20%20%20%20display%3A%20-ms-flexbox%3B%0A%20%20%20%20display%3A%20-webkit-flex%3B%0A%20%20%20%20display%3A%20flex%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201dp%20%7B%0A%20%20display%3A%20-webkit-box%3B%0A%20%20display%3A%20-webkit-flex%3B%0A%20%20display%3A%20-ms-flexbox%3B%0A%20%20display%3A%20flex%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20float%3A%20left%3B%0A%20%20display%3A%20inline-block%3B%0A%20%20width%3A%20100px%3B%0A%20%20background%3A%20blue%3B%0A%20%20font-size%3A%2030px%3B%0A%20%20color%3A%20white%3B%0A%20%20text-align%3A%20center%3B%0A%7D%0A%3Cp%3E%0A%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%0A%20%20%3Cspan%3E%20techy%20%3C%2Fspan%3E%3C%2Fp%3E%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dcss\u201d manual=\u201ditem%20%0A%7B%0A%20%20display%3A%20inline-block%3B%0A%20%20margin-right%3A%20-0.25em%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>no need to touch parent element.<\/li>\n<li>Only condition here: the item\u2019s font-size must not be defined (must be equal to parent\u2019s 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[pastacode lang=\u201dcss\u201d manual=\u201dp%20%0A%7B%0A%20%20display%3A%20flex%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20float%3A%20left%3B%0A%20%20display%3A%20inline-block%3B%0A%20%20width%3A%20100px%3B%0A%20%20background%3A%20green%3B%0A%20%20font-size%3A%2030px%3B%0A%20%20color%3A%20orange%3B%0A%7D%0A%3Cp%3E%0A%20%20%3Cspan%3Ehi%20wikitechy%20%3C%2Fspan%3E%0A%20%20%3Cspan%3E%20hello%20wikitechy%3C%2Fspan%3E%0A%3C%2Fp%3E%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201dspan%20%0A%7B%20%0A%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20width%3A100px%3B%0A%20%20%20%20background%3Apink%3B%0A%20%20%20%20font-size%3A30px%3B%0A%20%20%20%20color%3Awhite%3B%20%0A%20%20%20%20text-align%3Acenter%3B%0A%0A%20%20%20%20float%3Aleft%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201dp%20%0A%7B%0A%20%20%20display%3A%20flex%3B%0A%20%20%20flex-direction%3A%20row%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cul%20class%3D%22items%22%3E%0A%20%20%20%3Cli%3EItem%201%3C%2Fli%3E%3C%3Fphp%0A%20%3F%3E%3Cli%3EItem%202%3C%2Fli%3E%3C%3Fphp%0A%20%3F%3E%3Cli%3EItem%203%3C%2Fli%3E%0A%3C%2Ful%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dcss\u201d manual=\u201dspan%20%0A%7B%0A%20%20%20%20display%3A%20table-cell%3B%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201d%20%20%20%20%20*%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%20%20%20%20%20%20%0A%7D%0A%20%20%20%20%20.row%20%0A%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20vertical-align%3A%20top%3B%0A%20%20%20%20%20%20%20%20%20%20white-space%3A%20nowrap%3B%20%20%20%20%20%20%20%0A%20%7D%0A%20%20%20%20%20.column%0A%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20float%3Aleft%20%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20display%3Ainline-block%20%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20width%3A50%25%20%2F%2F%20or%20whatever%20in%20your%20case%20%20%20%20%20%0A%20%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"html\"><span style=\"color: #000000;\"><b>Html :<\/b><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22column%22%3E%20Hello%20Wikitechy%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22column%22%3EWikitechy%20technology%20forum%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dHTML CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dcss\u201d manual=\u201ddiv%20a%20%0A%7B%20%0Adisplay%3A%20inline%20-%20block%3B%20margin%20-%20right%3A%20-4%20px%3B%20%0A%7D%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"font-size-to-zero\"><span style=\"color: #000000;\"><b>font size to zero<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dnav%20%0A%7B%0A%20font%20-%20size%3A%200%3B%20%0A%7D%0A%20nav%20a%20%0A%7B%0A%20font%20-%20size%3A%2016%20px%3B%20%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"skip-the-closing-tag\"><span style=\"color: #000000;\"><b>Skip the closing tag<\/b><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3C%20ul%20%3E%20%3C%20li%20%3E%20one%20%3C%20li%20%3E%20two%20%3C%20li%20%3E%20three%20%3C%20%2Ful%3E%0A\u201d message=\u201dHTML code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: Given this HTML &#038; CSS: [pastacode lang=\u201dcss\u201d manual=\u201dspan%20%0A%7B%20%0A%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20width%3A100px%3B%0A%7D%0A%3Cp%3E%0A%20%20%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%0A%20%20%20%20%3Cspan%3E%20techy%20%3C%2Fspan%3E%0A%3C%2Fp%3E%0A\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] [ad type=\u201dbanner\u201d] 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: [pastacode lang=\u201dcss\u201d manual=\u201d%3Cp%3E%0A%20%20%20%20%3Cspan%3E%20wiki%20%3C%2Fspan%3E%3Cspan%3E%20techy%20%3C%2Fspan%3E%0A%3C%2Fp\u201d message=\u201dCSS CODE\u201d highlight=\u201d\u201d [&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}]}}