0

inline-block <span> get 100% width of parent if have multiple lines of text inside. Why first span get width of it content, but second get width of parent?

h1{text-align:center;}
span{border:1px solid #000; display:inline-block;}

<div style="width:500px;">
    <h1><span>aaaaaaaa</span></h1>
    <h1><span>aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa</span></h1>
</div>

https://jsfiddle.net/6wpLvb5x/

Vv.
  • 89
  • 9
  • 1
    Add a couple more a's in the beginning :) Just kidding. That spacing (on the left and right sides) is not any padding or margin properties, it's just the text filling in the available width as possible -- remember that you're aligning the text to the center... – Pedro Serpa Nov 20 '19 at 19:20
  • why span ignores `inline-block` and get 100% width of parent, not the width of the text inside? – Vv. Nov 20 '19 at 19:29

1 Answers1

-1

It is not adding extra padding, it's just solving alignment if the content is exceeding greater than width of div as mentioned as 500px, to solve this issue, either make div as fluid as width as 100% or add css property word-break: break-all to span, as DOM will render based on content size;

h1{text-align:center;}

span{border:1px solid #000; display:inline-block;}
<div style="width:100%">

<h1><span> aaaaaaaa aaaaaaaa </span></h1>
<h1><span>aaaaaaaa gawgwe gsadgd gasdgds asffasdf gweg gwege</span></h1>

</div>
Sarvesh Mahajan
  • 914
  • 7
  • 16