Tailwind CSS中border-bottom继承父元素宽度问题求助

你遇到的问题是：给h5添加底部边框后，边框宽度撑满了父div的宽度，而非适配h5自身的文字宽度。

问题原因 #

h5是块级元素，默认宽度为100%，会继承父容器的宽度，所以底部边框会跟着撑满整个父容器。

解决方案 #

给h5元素添加inline-block类，让元素宽度根据内容自适应：

<section>
  <div className='grid md:grid-cols-2 gap-10'>
    <div>
      <h5 className='text-custom-orange font-medium border-solid border-b-2 border-custom-orange inline-block'>BLOG'S</h5>
      <h1 className='text-5xl font-medium'>Insights</h1>
      <p>Ut enim ad minim veniam,  laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</section>

也可以用table类替代inline-block，同样能让元素宽度适配内容，边框只包裹文字部分。

内容的提问来源于stack exchange，提问作者besim