送信ボタンの大きさを変更したい

Question

前提・実現したいこと

HTML/CSSで問い合わせフォームを作成中です。

送信ボタンの大きさ（height:）の変更を試みたのですが、
一向に大きさが変更されません。

初歩的な質問で恐縮ですが、
何が原因で、どう対処すればよろしいでしょうか？

発生している問題・エラーメッセージ

送信ボタンの部分だけ、「height：」を設定しても大きさが変更されません。

該当のソースコード

HTML

        <div class="contact">
            <div class="contact-title">
                <h2>CONTACT</h2>
            </div>

            <div class="items">
                <form action="#" method="post">
                    <div class="items">
                        <div class="item">
                            <input id="i_name" type="text" name="name" placeholder="氏名">
                        </div>
                        <div class="item">
                            <input id="i_mail" type="email" name="mail" placeholder="メールアドレス">
                        </div>
                        <div class="item">
                            <input id="i_tel" type="tel" name="tel" inputmode="tel" placeholder="電話番号">
                        </div>
                        <div class="item">
                            <textarea id="t_message" name="message" placeholder="お問い合わせ内容"></textarea>
                        </div>
                        <div class="btn">
                            <input type="button" name="bin" value="送信">
                        </div>
                    </div>
                </form>
            </div>
CSS

.items {
    display: block;
    text-align: center;
}

.item input {
    margin-bottom: 10px;
    height: 30px;
    width: 400px;
}
.item textarea {
    height: 70px;
    width: 400px;

}
.btn input {
    height: 220px;
    width: 100px;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

ファイルが別なのであればコードブロックもわけてください。

[m.ts10806]

あとHTMLが半端ですね。閉じ</div>が足りてません。

[m.ts10806]

ただ、こちらの手元では提示されたコードで縦も横も反映されました。
キャッシュとか、他の指定が影響してないか確認してください。
「CONTACT」の位置も提示の画像と違う、左寄せなので、
他の指定があるのではないかと思います。

[ikutyan46]

m.ts10806さん
確認しました。おっしゃる通り、他の指定が影響している可能性が高いです。
が、ひとまず下記回答者さんの指示通りに行い、解決しました。

ご回答いただきありがとうございました！

Answer 1

.btn input {
    height: 220px;
    width: 100px;
    border: 1px solid #000; /* ←ボーダー指定追加してください */
}

Comments

[ikutyan46]

Lishさん
borderを指定し、解決しました！
おそらく、フォームの境界線を決めてなかったため高さを変更できなかったものと推測していますが、お間違い無いでしょうか？
まずは、ご回答いただきありがとうございました！！
「border: 1px solid #000; /* ←ボーダー指定追加してください */」

[退会済みユーザー]

ブラウザ標準のCSSをオーバーライドするとheightが効くようになるのですが、
私もよく分かっていないのです、、、border-colorを変えても良いんですよね、、、

ちなみにですが、input type="button"はブラウザによって仕様の差があるため、
実務ではnormalize.css等を使ってリセットする方法が一般的だと思います。

[ikutyan46]

勉強になります。ありがとうございます！

＞ちなみにですが、input type="button"はブラウザによって仕様の差があるため、実務ではnormalize.css等を使ってリセットする方法が一般的だと思います。