关于javascript:tailwindcss-系列-Display

Display 蕴含三种状况block inline-block inline

成果如下图

代码实现

block

    <div class="bg-gray-200 p-4">      <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2"        >1</span      >      <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2"        >2</span      >      <span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2"        >3</span      >    </div>

inline-block

    <div class="bg-gray-200 p-4">      <span        class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"        >1</span      >      <span        class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"        >2</span      >      <span        class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"        >3</span      >    </div>

inline

    <div class="bg-gray-200 p-4">      <span class="inline text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"        >1</span      >      <span class="inline text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"        >2</span      >      <span class="inline text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"        >3</span      >    </div>