インラインプロパティとは何を意味しますか?-フロントエンドQ&A-php.cn

インラインプロパティとは何を意味しますか?

藏色散人

リリース： 2020-07-02 10:43:30

オリジナル

3439 人が閲覧しました

inline 属性は inline style 属性を参照し、style 属性は要素のインラインスタイルを指定します。また、inline 要素にはボックスモデルもあるため、inline 要素に異なる CSS 属性を設定できます。幅、高さ、パディング、マージンなど。

インラインプロパティとは何を意味しますか?

#style 属性は要素のインラインスタイルを指定します。

インライン要素の属性設定

インライン要素にもボックスモデルがある

インライン要素にもボックスモデルがあるため、幅、高さ、パディング、パディングなどのさまざまな CSS 属性をインライン要素に設定できます。マージンでは、インライン要素でこれらの属性を設定する必要がありますか?

インライン要素の幅と高さの設定

インライン要素の幅と高さを設定することは無効です

.span1 {
    height: 200px;
    width: 200px;
}
 
<span class=&#39;span1&#39;>行内元素设置宽度和高度</span>

ログイン後にコピー

現時点では、ページとボックスを観察します。レンダリングされたモデルから、次のことがわかります。

インライン要素に幅と高さが設定されている場合でも、インライン要素によって表示される特定の幅と高さは、コンテンツそのものなので、インライン要素の幅と高さを設定します。高値は無効です

インライン要素のパディングとマージンの設定

は左右に影響しますが、上下には影響しません

インライン要素のパディングとマージンの上限と下限の特定の値のパフォーマンスの設定

<span class=&#39;span2&#39;>行内元素设置边距上下属性</span><br>
 
.span2 {
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

ログイン後にコピー

上の図から、padding-top、padding-bottom、margin-top、および margin を設定したことがわかります。インライン要素の -bottom 属性ですが、これらの属性には特定の効果はありません。その効果は、「伸びて開いた」ように見えますが、他の要素には影響しませんでした。

インライン要素でパディングと左右のマージンを設定する特定の値のパフォーマンス

効果は発生します

<span class=&#39;span3&#39;>行内元素设置边距左右属性</span><br>
 
.span3 {
    padding-left: 100px;
    padding-right: 200px;
    margin-left: 300px;
    margin-right: 400px;
}

ログイン後にコピー

上の図からわかるように、padding-left を設定すると、、インライン要素のパディング -right、margin-left、margin-right 属性は、行内の要素の位置に影響します。