HTMLのフォームなどでよく使う1行テキストやテキストエリアだが、sizeやcolsを指定しても、ブラウザによって表示のされ方が異なってしまい、ホームページのデザインが崩れる原因となってしまう。
<p>テキスト</p>
<input class=”box” type=”text” size=”30″>
<p>テキストエリア：</p>
<textarea class=”tarea” cols=”30″ rows=”5″></textarea>
対処方法は、スタイルシートで横幅（width:**px）と高さ（height:**px）を指定する。（横幅だけでもかなり有効）
PCではさほど気にする必要はないが、スマホなど横幅の狭いブラウザでは注意が必要だ。
<style>
.box {width: 200px;}
.tarea {width: 200px;
height: 80px;}
</style>
各ブラウザの空白や行間の違いは、HTMLやCSSを読み取って画面上に出力するプログラム（HTMLレンダリングエンジン）の相違によるもの。
これらの相違を抑える予防的な処置として、「リセットCSS」「CSSハック」「条件付コメント」などの方法がある。