パソコンQ&A

インライン要素にwidthやheightを指定すると表示が変わる

インライン要素にpaddingやborderを付けると、重なるのは仕様ですが、 インライン要素に幅や高さを指定するとボーダーやパディングが重ならない。
またインライン要素には幅や高さの指定がきかないのが仕様ですが、 幅や高さの指定がききます。

height:1pxの例

テスト

テスト

テスト

width:250pxの例

テスト

テスト

テスト

height指定なしの例

テスト

テスト

テスト

これらはIE以外のブラウザでは全て同じ表示になります。

対象ブラウザ

Windows
Internet Explorer5.0〜7
Mac
Internet Explorer5

回避方法

IEを他のブラウザのように、重なるようにしたり、領域サイズ指定を無視することはできません。
逆に他のブラウザをIEと同じようにする場合、 縦並びならdisplay:block、横並びならdisplay:inline-tableを指定する。
paddingやborderが重なるデザインにすることはあまりないので、この問題で困ることはないでしょう。

テスト テスト テスト

テスト

テスト

テスト

関連プロパティ

display要素の表示形式(ブロック・インライン)を指定する
width幅を指定する
height高さを指定する
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