html - 无法删除 之间的空格

Question

我正在尝试用 HTML 创建一个“注册”页面，并将表格置于中心。但是当我把 table 移到中间时，'s' 之间有一个巨大的差距。我试过“cellspacing”但它不起作用，因为我使用的是 HTML5。我也试过“边框间距:0px；”但它也不起作用。

我正在使用最新版本的 Chrome 和 Sublime Text

代码:

body {
  background-color: #8F3985;
}

table.tablo {
  background-color: #07BEB8;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 650px;
  border-spacing: 0px;
}

table {
  border-spacing: 0px;
}

<form>
  <table class="tablo">
    <tr>
      <td>
        <h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
      </td>
    </tr>
    <tr>
      <td>
        Adı:
      </td>
      <td>
        <input type="text" name="">
      </td>
    </tr>
    <tr>
      <td>
        Soyadı:
      </td>
      <td><input type="text" name=""></td>
    </tr>
    <tr>
      <td>
        Cinsiyeti:
      </td>

      <td>
        <input type="radio" name="durum">Erkek
        <input type="radio" name="durum">Kadın
      </td>
    </tr>
    <tr>
      <td>
        Doğum Yeri:
      </td>
      <td>
        <select>
          <option>Bulgaristan</option>
          <option>İstanbul</option>
          <option>Ankara</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        Doğum Tarihi:
      </td>
      <td>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>Ocak</option>
          <option>Şubat</option>
          <option>Mart</option>
        </select>
        <select>
          <option>2000</option>
          <option>2001</option>
          <option>2002</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="" value="Kaydet">
        <input type="reset" name="" value="Temizle">
      </td>
    </tr>
  </table>
</form>

Answer 1

有时出现任何样式问题的原因可能是父控件的样式。在这种情况下，Table 嵌套在 Form 控件中，因此需要先更改 form 控件的样式，更改样式后 form 位置发生变化，而 table 的 padding 空间变化不大。

body {
  background-color: #8F3985;
}

table.tablo {
  
  background-color: #07BEB8;
  margin-left: auto;
  margin-right: auto;  
  width: 650px;  
  padding: 50px;  
}


form {    
    margin-top:20%;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:20%;
    width: 80%;
}

<form>
  <table class="tablo">
    <tr>
      <td>
        <h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
      </td>
    </tr>
    <tr>
      <td>
        Adı:
      </td>
      <td>
        <input type="text" name="">
      </td>
    </tr>
    <tr>
      <td>
        Soyadı:
      </td>
      <td><input type="text" name=""></td>
    </tr>
    <tr>
      <td>
        Cinsiyeti:
      </td>

      <td>
        <input type="radio" name="durum">Erkek
        <input type="radio" name="durum">Kadın
      </td>
    </tr>
    <tr>
      <td>
        Doğum Yeri:
      </td>
      <td>
        <select>
          <option>Bulgaristan</option>
          <option>İstanbul</option>
          <option>Ankara</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        Doğum Tarihi:
      </td>
      <td>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>Ocak</option>
          <option>Şubat</option>
          <option>Mart</option>
        </select>
        <select>
          <option>2000</option>
          <option>2001</option>
          <option>2002</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="" value="Kaydet">
        <input type="reset" name="" value="Temizle">
      </td>
    </tr>
  </table>
</form>