iPhoneのSafariでお問い合わせページを見たところ、ボタンの上に謎の余白がありました。
PCで確認した際にはその余白が見当たらなかったため、原因がわからず、* { border: 1px solid red; } を使って調査した結果、テーブル内のtextareaの下に余白が発生していることがわかりました。
テーブルでの解決を目指して、以下を試しました。
- vertical-align の調整（top、middle、bottom など）
- padding・margin のリセット
- all: unset; によるデフォルトスタイルの解除
（ブラウザが最初から付けている枠線や余白などを全てリセット） - -webkit-appearance の指定
（Safari系ブラウザによる自動の見た目をオフにする）
それでもどうしても消えなかったため、
最終的にはレイアウトを table → div に組み直して対応しました。
「テーブル構造で完璧に直したい」という場合は、環境や使用ブラウザによってうまくいくこともあるかもしれませんが、今回のケースではdivに変更するのがいちばん確実でした。
テーブルでできる余白の考えられる原因
テーブルのセル（td）は、デフォルトでvertical-align: baseline;が設定されており、このため中のtextareaが浮いたり沈んだりして余白が発生しやすい。
そこで、vertical-align: top; を<td>に指定しましたが、解決には至りませんでした。
スマホではフォントの行間が広くなることがあるので、それが下に空間を作ってる可能性もあります。
また、各ブラウザが独自にtextareaにmarginやpaddingを追加しているため、それが原因となっている可能性があります。そこで、all: unset; を使ってブラウザのデフォルトスタイルを解除しました。
all: unset;の説明
margin, padding, border, background, font, colorなど、すべてのプロパティがリセットされます。
例えばボタンの背景色や入力欄の枠線などがなくなります。必要に応じて再設定が求められます。
input, textarea {
all: unset;
border: 1px solid #ccc;
padding: 8px;
box-sizing: border-box; /* 余白計算を統一 */
width: 100%;
background-color: #fff;
}しかし、たとえtextareaに all: unset; をしても、
さらに、SafariやiPhoneはフォーム要素に独自の位置調整をすることがあるようです。
テーブルセル（<td>）は「中身をベースラインで揃えよう」としてくるため、
textareaが下に寄ったり、余白が見えたりすることがあります。
細かい見た目の調整を行いたい場合はdivを使うと
- ブロック要素としての位置・サイズが素直に決まる
- テーブル特有の「縦揃えルール」に悩まされない
- スマホやSafariでもCSSの制御が効きやすい
ので、テーブルタグではなくdivタグを使用したほうが良さそうです。
