ホームページ  >  記事  >  ウェブフロントエンド  >  インラインプロパティとは何を意味しますか?

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

藏色散人
藏色散人オリジナル
2020-07-02 10:43:303369ブラウズ

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 属性は、行内の要素の位置に影響します。

関連知識の詳細については、

PHP 中国語 Web サイト をご覧ください。

以上がインラインプロパティとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。