tdに指定していないマージンがつく

###指定したサイズのtdでテーブルを作りたい

フォームを作るため、テーブルタグで作業しているのですが指定していないマージンがtdに出てしまいます。
(オレンジの部分がマージンです。)

マージンを指定していないので、なぜこうなるのかが調べても分かりません。。

###該当のソースコード

css
1.wrapper .form-table td {
2  padding: 30px 0;
3}
4
5.wrapper .form-table .form-textbox {
6  display: block;
7  background-color: pink;
8  width: 37px;
9}
10

html
1   <div class="wrapper">
2    <table class="form-table">
3      <tbody>
4        <tr>
5          <td class="form-icon"><div class="icon">必須</div></td>
6          <td class="form-title">title1230</td>
7          <td class="form-textbox">姓</td>
8          <td>
9            <input type="text" name="post_code" class="basic">
10          </td>
11        </tr>
12      </tbody>
13    </table>
14  </div>
15

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

ベストアンサー

こちらで。

css
1.wrapper .form-table .form-textbox {
2/*	display: block; 削除してください */
3	background-color: pink;
4	width: 37px;
5}

投稿2016/10/31 07:54

gin

総合スコア2722

takamiii_158cm

2016/10/31 07:58

ありがとうございます＾＾！うまくいきました。

行動規範の内容に同意します

html
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<style>
5.wrapper .form-table td {
6  padding: 30px 0;
7}
8
9.wrapper .form-table .form-textbox {
10  display: block;
11  background-color: pink;
12  width: 37px;
13}
14</style>
15</head>
16
17<body>
18<div class="wrapper">
19    <table class="form-table">
20      <tbody>
21        <tr>
22          <td class="form-icon"><div class="icon">必須</div></td>
23          <td class="form-title">title1230</td>
24          <td class="form-textbox">姓</td>
25          <td>
26            <input type="text" name="post_code" class="basic">
27          </td>
28        </tr>
29      </tbody>
30    </table>
31  </div>
32</body>
33</html>