Bulma CSS 框中不需要的空间答案

【问题标题】：Unwanted space in Bulma CSS boxBulma CSS 框中不需要的空间
【发布时间】：2021-09-25 23:12:44
【问题描述】：

目前我正在研究 bulma css 框架。我正在联系我们页面，但那里有一些不需要的空间。我试过很多，但不知道如何删除它？我刚刚分享了以下问题的图片。 This is Image

这是代码

<section class="p-5">
        <div class="columns is-desktop box has-background-grey-light m-0">
            <div class="column">
                <div class="has-text-centered">
                    <div class="box">
                        <span class="icon m-4">
                            <i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
                        </span>
                        <p class="is-size-5 has-text-weight-medium has-text-grey">Our Address</p>
                        <p class="m-2">A108 Adam Street, New York, NY 535022</p>
                    </div>
                    <div class="columns is-desktop m-0">
                        <div class="column box">
                            <span class="icon m-4">
                                <i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
                            </span>
                            <p class="is-size-5 has-text-weight-medium has-text-grey">Email Us</p>
                            <p class="m-2">info@example.com
                                contact@example.com</p>
                        </div>
                        <div class="column box ml-5">
                            <span class="icon m-4">
                                <i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
                            </span>
                            <p class="is-size-5 has-text-weight-medium has-text-grey">Call Us</p>
                            <p class="m-2">+1 5589 55488 55<br />
                                +1 6678 254445 41</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="box">

                </div>
            </div>
        </div>
    </section>

【问题讨论】：

标签： javascript html css tailwind-css bulma

【解决方案1】：

只尝试像这样的 TailwindCSS，

<section class="flex w-full flex-col bg-gray-300 text-xl">
  <div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2">
    <img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
    <span class="font-bold">Our Address</span>
    <div class="flex flex-col md:flex-row items-center">
      <span> A108 Adam Street,</span>
      <span>New York, NY 535022</span>
    </div>
  </div>
  <div class="flex flex-col md:flex-row justify-around w-full">
    <div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
      <img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
      <span class="font-bold">Email Us</span>
      <span>info@example.com</span>
      <span>contact@example.com</span>
    </div>
    <div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
      <img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
      <span class="font-bold">Call Us</span>
      <span>+1 5589 55488 55</span>
      <span>+1 6678 254445 41</span>
    </div>
  </div>
</section>

查看Tailwind Play

【讨论】：