Inconsistent gap with inline-block

Question

Currently, there is no gap between the "-" button and the quantity field. It shows up when I apply display: inline; for .qib-container div.quantity but inline has one downside that I found out and possibly more. I expected both gaps to show up with inline-block.

I would like to know why this happens and how to make this gap appear.

As far as aesthetics go, I prefer no gaps at all, but I already have a working solution for this, "with gaps" is just an alternate option.

https://jsfiddle.net/Lybwro64/

.qib-button {
    line-height: 1.2;
    display: inline-block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 35px;
    width: 30px;
    color: #000;
    background: #e2e2e2;
    border-color: #cac9c9;
    vertical-align: top;
    font-size: 16px;
    letter-spacing: 0;
    border-style: solid;
    border-width: 1px;
    transition: none;
    border-radius: 2px;
 }
.qib-container div.quantity {
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
 }
 .qib-container .quantity input.qty {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 35px;
    width: 45px;
    min-height: unset;
    min-width: unset;
    box-shadow: none;
    font-size: 15px;
    border-style: solid;
    border-color: #cac9c9;
    border-width: 1px;
    border-radius: 2px;
    text-align: center
}
  .screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

<div class="qib-container">
<button type="button" class="minus qib-button">-</button><div class="quantity">
<label class="screen-reader-text" for="quantity_5d33c50739412">Stainless steel standoff - satin finish quantity</label>  <input type="number" id="quantity_5d33c50739412" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric"></div>
<button type="button" class="plus qib-button">+</button></div>

Thanks for answers everyone, they are correct, helped me to troubleshoot the issue, however, it still persists. I was aware of the line breaks being behind the gaps, but strangely while my Notepad++ UTF8 encoded (no BOM) PHP file displays CRLF after each line, on the front end one of them simply disappears resulting in what I pasted as HTML code, with the line break missing. This is not echoed, it's HTML in a PHP file. Any idea why it would happen? — Ryszard Jędraszyk, Jul 21 '19 at 03:40
It came out that Autoptimize plugin's HTML minification removed this line break. — Ryszard Jędraszyk, Jul 21 '19 at 16:01

Andy Hoffman · Answer 1 · 2019-07-21T02:39:46.453

The gap you're seeing is the actual white space between the closing div and the + button. in the HTML. It's a well-known issue with inline-block. The easiest workaround, if you want to keep the gap, is to remove the inline-block instances and make the parent a flex container. Doing this removes all gaps. Then you can manually add the margin (gap) back, as needed.

.qib-button {
  line-height: 1.2;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 35px;
  width: 30px;
  color: #000;
  background: #e2e2e2;
  border-color: #cac9c9;
  vertical-align: top;
  font-size: 16px;
  letter-spacing: 0;
  border-style: solid;
  border-width: 1px;
  transition: none;
  border-radius: 2px;
}

.qib-container div.quantity {
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
}

.qib-container .quantity input.qty {
  line-height: 1.2;
  padding: 0;
  box-sizing: border-box;
  height: 35px;
  width: 45px;
  min-height: unset;
  min-width: unset;
  box-shadow: none;
  font-size: 15px;
  border-style: solid;
  border-color: #cac9c9;
  border-width: 1px;
  border-radius: 2px;
  text-align: center
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.qib-container {
  display: flex;
}

.qib-container > *:not(:last-child),
.input-text.qty {
  margin-right: 5px;
}

<div class="qib-container">
  <button type="button" class="minus qib-button">-</button>
  <div class="quantity">
    <label class="screen-reader-text" for="quantity_5d33c50739412">Stainless steel standoff - satin finish quantity</label> <input type="number" id="quantity_5d33c50739412" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1"
      title="Qty" size="4" inputmode="numeric"></div><button type="button" class="plus qib-button">+</button></div>

jsFiddle

score 1 · Accepted Answer · answered Jul 21 '19 at 02:42

This is caused by the code formating. Line breaks result in a little spacing between rendered elements. Ex: Add line break after the "-" button.

Note: consecutive line breaks do not result in additional spacing.

.qib-button {
    line-height: 1.2;
    display: inline-block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 35px;
    width: 30px;
    color: #000;
    background: #e2e2e2;
    border-color: #cac9c9;
    vertical-align: top;
    font-size: 16px;
    letter-spacing: 0;
    border-style: solid;
    border-width: 1px;
    transition: none;
    border-radius: 2px;
 }
.qib-container div.quantity {
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
 }
 .qib-container .quantity input.qty {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 35px;
    width: 45px;
    min-height: unset;
    min-width: unset;
    box-shadow: none;
    font-size: 15px;
    border-style: solid;
    border-color: #cac9c9;
    border-width: 1px;
    border-radius: 2px;
    text-align: center
}
  .screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

<div class="qib-container">
<button type="button" class="minus qib-button">-</button>
<div class="quantity">
<label class="screen-reader-text" for="quantity_5d33c50739412">Stainless steel standoff - satin finish quantity</label>  <input type="number" id="quantity_5d33c50739412" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric"></div>
<button type="button" class="plus qib-button">+</button></div>

score 1 · Answer 3 · answered Jul 21 '19 at 02:47

1

so there's no issue with your styles nor inline-block value.

The issue is just WHITESPACE in your html.

Your markup introduces the WHITESPACE

Check the image below

answered Jul 21 '19 at 02:47

mbao01

160
3
6

Inconsistent gap with inline-block

3 Answers3