Unknown space, not margin nor padding

Question

What is the space between html elements that appears even when the margin and padding are set to 0, and how do I get rid of it?

Run the following code snippet and notice the space between the elements:

* {
  margin:0;
  padding:0;
}
.button-label, .tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid;
}
[name="tab-group-1"] {
  display: none;  
}

Example 1:
<div class="button-container">
       <button class="button-label">Button One</button>
       <button class="button-label">Button Two</button>
       <button class="button-label">Button Three</button>
</div>
Example 2:
<div class="radio-container">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label class="tab-label" for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1">
       <label class="tab-label" for="tab-2">Tab Two</label>
       <input type="radio" id="tab-3" name="tab-group-1">
       <label class="tab-label" for="tab-3">Tab Three</label>
</div>

Here's a [`good read`](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) on the subject, if you're interested. Features multiple solutions for it. I recommend `flexbox`. — tao, Mar 06 '17 at 03:27
Thanks. I normally would use flexbox, but I'm working on a challenge where I'm trying to create a responsive tab container that accordions down (without using positioning) and using only html and css (no JS) and the only way I can find to do that is to put the inputs and the content next to eachother under the same parent div. If I were to wrap the input buttons in another div so that I could make it a flexbox, then I wouldn't be able to reference `#button-1:focus ~ #content-1{display:"flex"}` to show content. And if I use flex on the parent, the content will be treated just like the buttons. — Damian Green, Mar 06 '17 at 03:52
Well, since you mentioned `responsive`, you should notice `font-size: 0` is really bad for mobile devices, but you got plenty other options to choose from. Happy coding! — tao, Mar 06 '17 at 03:54

score 0 · Answer 1 · answered Mar 06 '17 at 03:10

The space can be difficult to diagnose initially because it is not highlighted by browser inspectors, but once you know that it is a result of white-space (new-lines) in your html in-between your html tags, then handling the problem is quite simple. You have one of several options to remove the space including the following:

Either, remove that white space between your tags in your html. (Unfortunately, that makes your html messier, so the second option may be better.)
Or, in your css, set the font-size in the parent container to 0px ( ex: #parent{font-size:0px;} ), and then initialize it again for all the children of the parent (with something like #parent *{font-size:initial;} ). Note: This solution may require you to specify again some of the child font-sizes if they had been modified earlier in your css flow.

Here's an Example: (notice the space has been removed)

* {
  margin:0;
  padding:0;
}
#button-container, #radio-container{
  font-size:0px;
  display:block;
}
#button-container *, #radio-container *{
  font-size:initial;
}
.button-label, .tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid;
}
[name="tab-group-1"] {
  display: none;  
}

Example 1:
<div id="button-container">
       <button class="button-label">Button One</button>
       <button class="button-label">Button Two</button>
       <button class="button-label">Button Three</button>
</div>
Example 2:
<div id="radio-container">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label class="tab-label" for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1">
       <label class="tab-label" for="tab-2">Tab Two</label>
       <input type="radio" id="tab-3" name="tab-group-1">
       <label class="tab-label" for="tab-3">Tab Three</label>
</div>

Unknown space, not margin nor padding

1 Answers1