パソコンQ&A

インライン要素にborderやpaddingが効かない

spanタグなどのインライン要素にボーダーやパディングが効かない。

テスト

テスト

テスト

対象ブラウザ

Windows
Internet Explorer5

回避方法

IE5.xに対して height:1px; を指定する。
height を小さく指定しても、内包要素に合わせて拡大されます。

width:1px;でも回避できますが、この場合、日本語であれば1文字づつ、英語であれば1単語づつ改行されるため、必要に応じて white-space: nowrap; を指定する。
ただし white-space はIE5.5からの実装のためIE5.0には適応できない。

[参考記事] CSS辞典 white-space
[参考記事] ページナビについて

テスト

インライン要素にpaddingやborderを付けると、重なるのは仕様です。
ただしインライン要素に幅や高さを指定するとIEとそれ以外のブラウザで表示が変わります。
[参考記事] インライン要素に幅や高さを指定するとボーダーやパディングが重ならない。

テスト

テスト

テスト

関連プロパティ

display要素の表示形式(ブロック・インライン)を指定する
borderボーダーのスタイル・太さ・色を四方まとめて指定する
border-bottom下ボーダーのスタイル・太さ・色を指定する
border-bottom-width下ボーダーの太さを指定する
border-left左ボーダーのスタイル・太さ・色を指定する
border-left-width左ボーダーの太さを指定する
border-right右ボーダーのスタイル・太さ・色を指定する
border-right-width右ボーダーの太さを指定する
border-top上ボーダーのスタイル・太さ・色を指定する
border-top-width上ボーダーの太さを指定する
paddingパディングに関する指定をまとめて行う
padding-bottom下パディングを指定する
padding-left左パディングを指定する
padding-right右パディングを指定する
padding-top上パディングを指定する


主要ブラウザに非対応

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net