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>