why there is 1px space between span and outdiv

Question

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 230px;
  border: 1px solid red;
}
input {
  width: 30px;
  line-height: 20px;
  background: #e5e5e5;
  border: 0;
  text-align: center;
  padding: 0 5px;
  font-size: 14px;
}
span {
  padding: 0 2px;
  cursor: pointer;
  line-height: 20px;
  font-size: 14px;
  display: inline-block;
}

<div class="box">
  <span>xx</span>
  <input type="text" value="322xxx">

I want to know why there is 1px space between bottom of span and bottom of outdiv? can someone help me out?

Can you do a snippet or codepen please?, also you appear to be missing the closing div tag — Ricky, Sep 01 '16 at 04:25

score 1 · Answer 1 · answered Sep 01 '16 at 04:26

1

You need to set vertical-align:top for the display: inline-block span tag

*{
        margin: 0;
        padding: 0;
    }
   .box{
       width: 230px;
       border:1px solid red;
   }
    input{
        width: 30px;
        line-height: 20px;
        background: #e5e5e5;
        border: 0;
        text-align: center;
        padding: 0 5px;
        font-size: 14px;
    }
    span{
        padding: 0 2px;
        cursor: pointer;
        line-height:20px;
        font-size: 14px;
        display: inline-block;
      vertical-align: top;
    }

<div class="box">
<span>xx</span>
<input type="text" value="322xxx">

answered Sep 01 '16 at 04:26

z0mBi3

1,534
8
9

I want to know why ? – a86356 Sep 01 '16 at 04:28
The default `vertical-align` is `baseline` for `display` `inline-block` elements – z0mBi3 Sep 01 '16 at 04:29
both input and span are align to baseline,i suppose it should no space?they are both 20px line-height – a86356 Sep 01 '16 at 06:01
There is a detailed explanation for positioning display inline, inline-block in http://christopheraue.net/2014/03/05/vertical-align/ – z0mBi3 Sep 01 '16 at 06:47

score 0 · Answer 2 · answered Sep 01 '16 at 04:46

0

By default, a span element is an inline level element, which respects the whitespace in the markup. Thats the reason a small space between the input and span. Thanks..

answered Sep 01 '16 at 04:46

KickyTrick

328
2
16

1

That's not what the question was asking, it was about the bottom of the input, and the containing div. – Lee Sep 01 '16 at 07:57
@Lee, I have answered at right prospective. The spaces for the inline elements are browser dependent. – KickyTrick Sep 01 '16 at 08:41
1

No you're talking about the space between the input and span, which isn't what the question is asking. – Lee Sep 01 '16 at 09:00
The question is referring to vertical spacing; your point applies to horizontal spacing – j08691 Sep 04 '16 at 03:09

why there is 1px space between span and outdiv

2 Answers2