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
Post a Comment