見出しやボタンなどに上下左右均等に余白を取ろうとして、padding: 10px と指定してもなぜか上下方向だけ伸びてしまうことがある。これは親要素に指定された line-height の影響を受けるためだ。
font-size:16px, padding:10px の場合
CSS
ブラウザによる1行textやtextareaのサイズの違い
HTMLのフォームなどでよく使う1行テキストやテキストエリアだが、sizeやcolsを指定しても、ブラウザによって表示のされ方が異なってしまい、ホームページのデザインが崩れる原因となってしまう。
<p>テキスト</p>
<input class=”box” type=”text” size=”30″>
<p>テキストエリア：</p>
<textarea class=”tarea” cols=”30″ rows=”5″></textarea>
