CSSでli間隔を設定する方法

醉折花枝作酒筹
リリース: 2023-01-05 16:10:29
オリジナル
15288 人が閲覧しました

CSS では、margin 属性を使用して li 間隔を設定することができ、要素に「margin: 値の単位 | パーセント値」を設定するだけです。 margin プロパティは、要素のすべてのマージンの幅を設定するか、各側のマージンの幅を設定します。

CSSでli間隔を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。

css margin abbreviation 属性を使用して li タグのマージンを設定し、li の間隔を増やすことができます。margin abbreviation 属性は、1 つのステートメントですべてのマージン属性を設定します。この属性には 1 ~ 4 の値を指定できます。

li タグ間のデフォルトの間隔は次のとおりです。

  • 最初の li
  • 2 番目の li
  • 3 番目の li

効果は次のとおりです:

CSSでli間隔を設定する方法

css は li 間隔を増やします:

li{
width: 300px;
height: 30px;
margin: 20px 0;
}
ログイン後にコピー

効果は次のとおりです:

CSSでli間隔を設定する方法

margin 短縮属性:

この短縮属性は、要素のすべてのマージンの幅、または各側のマージンの幅を設定します。

ブロックレベル要素の垂直方向に隣接するマージンはマージされますが、インライン要素は実際には上下のマージンを占有しません。インライン要素の左右のマージンはマージされません。同様に、フローティング要素のマージンはマージされません。負のマージン値を指定することもできますが、使用する場合は注意してください。

注: 負の値も許可されます。

属性値: auto ブラウザーがマージンを計算します。

length は、ピクセル、センチメートルなどの特定の単位で余白の値を指定します。デフォルト値は 0px です。

% マージンを親要素の幅のパーセンテージとして指定します。

inherit は、マージンを親要素から継承することを指定します。

以上がCSSでli間隔を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート