インライン要素に垂直パディングや垂直ボーダーを設定できますか? _html/css_WEB-ITnose

教科書には、インライン要素の垂直パディングと垂直ボーダーの設定は無効であると記載されています。
しかし、試してみたところ、次の結果が得られました:

<span style="background:red; border:5px solid blue; padding:100px;">aaa</span>

IE8 および FF の下:


IE6 および IE7 の下:


IE8 と FF は w3c 標準に準拠しているはずですが、IE6 と IE7 は本に書いてあることとは違います。効果は同じです~

質問:
1. インライン要素に垂直方向のパディングと境界線を設定できますか?
2. この非互換性の問題を解決するにはどうすればよいですか?

ありがとうございます！

ディスカッションに返信 (解決策)

1<br/>1<br/>1<br/>1<br/>1<br/><span style="background:red; border:5px solid blue; padding:50px;">aaa</span>1<br/>1<br/>1<br/>1<br/>1<br/>

この効果を見てください

HTML コード

1
1
1
1
1< ;br/>
aaa 1
1
1
1
1



この効果を見てください
よくわかりません~ なぜ上のパディング領域は 1 をカバーするのに、下のパディング領域はカバーしないのですか?

パディングの間隔を Margin に変更して、どのような効果があるか試してみましょう

教科書には、インライン要素に垂直パディングと垂直ボーダーを設定するのは無効であると記載されています。

しかし、私が試してみたところ、次のような効果がありました:
HTML コード

aaa



IE8 , FF 次:


IE6、IE7:


IE8 と FF は w3c 標準との整合性が高いはずですが、IE6 と IE...
垂直方向の設定は上下を指します。上下の設定は影響しません。

<p>fsfsfsfs</p><p style="border:5px solid #900; padding:100px; background:#00F;"></p><p>fsfsfsd</p>

1 つ目: インライン要素と幅
幅が機能しない
span { width: 200px;
} 変更なし

2 つ目: インライン要素と高さ
高さが機能しない
span{ height: 200px; }
変更なし

3 番目: インライン要素とパディング、マージン
spank{
padding:200px;
}
上下ではなく左右に影響します

元の投稿者 wsy87217 からの返信を引用:
教科書には垂直パディングと書かれていますインライン要素には が設定されており、垂直境界線は無効です。
しかし、私が試してみたところ、次のような効果がありました:

HTML コード

aaa



IE8 , FF Next:


IE6, IE7:


I...
正解

教科書には、インライン要素に対する垂直パディングと垂直ボーダーの設定は無効と書いてあります。
しかし、私が試してみたところ、次のような効果がありました:
HTML コード

aaa



IE8 、FF 次:


IE6、IE7:


IE8 と FF は w3c 標準に準拠する必要がありますが、IE6 と IE...
http://www.360doc.com/content/11/0329/ 20/5723046_105698266.shtml
こちらをご参照ください。 。 。 。

投稿者 wsy87217 からの返信を引用:
教科書には、インライン要素の垂直パディングと垂直ボーダーの設定は無効であると記載されています。
しかし、私が試してみたところ、次のような効果がありました:

HTML コード

aaa



IE8 , FF Next:


IE6, IE7:


I...
あなたの例では、パディングは垂直方向の他の要素にも影響を与えませんか?


4階のwangyao1135さんからの返信引用：

投稿者wsy87217さんからの返信引用：

教科書にはインライン要素の縦パディングや縦ボーダーの設定は無効と書かれています。

しかし、私が試してみたところ、次のような効果がありました:
HTML コード

aaa



IE8 ...

<p style="background:yellow;">fsfsfsfs</p><span style="border:5px solid #900; padding:100px; background:#00F;"></span><p style="background:yellow;">fsfsfsd</p>

2番目のp要素のテキストコンテンツのみが表示され、最初のp要素のテキストコンテンツは上下の行に影響しませんか？

5階athrunzeroさんの返信引用：

4階wangyao1135さんの返信引用：

投稿者wsy87217さんの返信引用：
教科書にはインライン要素の縦パディングや縦ボーダーの設定は無効と書かれています。
しかし、私がそれを試してみたところ、次のような効果がありました:
HTML コード

5 階の athrunzero からの引用:

の wangyao1135 からの引用。 4階:

投稿者 wsy87217 さんの返信より引用:
教科書に書いてある インライン要素に縦方向のパディングや縦方向のボーダーを設定するのは無効です
しかし、試してみたところ、次のような効果がありました:
HTML コード

< ;span style="background:red; border:5px sold blue; padding:100...
その場合、テキストにspanタグを追加してからパディングを設定しても、上下のレイアウトは変わりません。 . テストしてみました。 。 。

インライン要素の幅と高さを設定してブロックレベルの要素にしたい場合は、CSS に display:block; と記述するだけです

インライン要素:
幅の設定は無効です
高さの設定は無効です。設定するには line-height のみを渡すことができます。
margin と padding には左右の効果のみがあり、上下の効果はありません。
互換性の効果を実現したい場合:
1) インライン要素をインライン ブロックに変換します。 :inline-block; そして内部スペースと外部スペースを設定します
2) text-align 属性またはvertical-align 属性を使用してテキストのレイアウトを設定できます。パディングはインライン要素の垂直方向を設定するもので無効ですが、テスト中に、まだ影響がほとんどないことがわかりました。インライン要素の高さとパディングの両方を設定すると、背景色が上記の要素のコンテンツを覆ってしまいます。ただし、背景色を削除しても効果はありません。

みなさん、ありがとうございました！ :)