html - why show diffrent between inline, inline-block in this case? -


in code, div's height 1 line height. if second span's display inline-block, div's height 2 line height.

<div style="border:1px solid #00b0ff; width:200px;">      <span style="width:100%;display: inline-block;background: #00b0ff">1</span>      <span style="display: inline; background: #ff3d00;"></span>  </div>  <hr />  <div style="border:1px solid #00b0ff; width:200px;">      <span style="width:100%;display: inline-block;background: #00b0ff">1</span>      <span style="display: inline-block; background: #ff3d00;"></span>  </div>

how can make show 1 line height?

you can add font-size:0 parent div , add needed font-size childs. occurs because of space between inline-block elements.

<div style="border:1px solid #00b0ff; width:200px; font-size:0">         <span style="width:100%;display: inline-block;background: #00b0ff; font-size:14px;">1</span>         <span style="display: inline-block; background: #ff3d00;"></span> </div> 

Comments

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -