0

We all know the ages old problem with white spaces between inline-block elements. For example:

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}
<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

The best solution in my opinion is to remove any spaces between the elements:

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}
<div class="wrapper">
    <div>
    </div><div>
    </div><div>
    </div><div>
    </div>
</div>

Can we do this on a ready HTML with javascript/jQuery, like adding a script to the first snippet to behave like the second one? Some sort of a $('.wrapper').minify(); function.

EDIT

Someone suggested a possible duplicate with How to minify HTML with CSS and Javascript?. That question is about reducing page size by editing files on server side. Here I'm looking for a solution that minifies a specific element after the content is transferred, without editing the html files. The problem is not page size, but white spaces in an element.

Improve this question
6
  • At that point the HTML has already been parsed to DOM so you'll have to stop thinking of it as HTML. What you'd do is remove the spaces from the DOM, not from the HTML (as Arun's answer shows.) Commented Jul 8, 2015 at 7:50
  • Why not do it using pure CSS? Commented Jul 8, 2015 at 7:53
  • In that case you have to do something like .wrapper div {margin:0 -.125em} which is not always a good solution. Commented Jul 8, 2015 at 7:55
  • possible duplicate of How to minify HTML with CSS and Javascript? Commented Jul 8, 2015 at 8:00
  • That question is on reducing page size before the transfer and this answer is not found there (neither is a valid solution for that question). Commented Jul 8, 2015 at 8:07

3 Answers 3

Reset to default
4

Using jQuery you can remove all the textnodes which are children of the wrapper element like

$('.wrapper').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).remove();
.wrapper div {
  width: 100px;
  height: 30px;
  display: inline-block;
  border: 1px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The pure CSS way to do this is to set the font-size of the parent element to 0

.wrapper div 
{
  width:100px; 
  height:30px; 
  display:inline-block; 
  border:1px solid #333;
}

.wrapper {
  font-size: 0;
}
<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Improve this answer

1 Comment

You are right, but this way I have no control over the font-size inside the divs with a global font-size setting. For example, if the elements inside are set to 1.5em from the parent setting, then this will be a bad solution. However, I am upvoting because it does handle the current problem, I am sure someone will find this answer helpful too. :)
0

If you're worried about the global font-size, then you can try using comments

.wrapper div 
{
  width:100px; 
  height:30px; 
  display:inline-block; 
  border:1px solid #333;
}
<div class="wrapper">
       <div></div><!--
    --><div></div><!--
    --><div></div><!--
    --><div></div>
</div>

Improve this answer

1 Comment

Yeah, but the original question was looking for a solution without editing the HTML. :) This is the same approach as removing the spaces.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.