CSS の margin-left プロパティは、要素の左マージンを設定するために使用されます。要素とその親要素の左端の間の距離を決定します。
margin-left 属性の主な機能は次のとおりです:
次に、margin-left 属性の使用と効果を示す具体的なコード例をいくつか示します。
<!DOCTYPE html> <html> <head> <style> .box { width: 200px; height: 100px; background-color: #f2f2f2; margin-left: 20px; } .box2 { width: 200px; height: 100px; background-color: #f2f2f2; margin-left: -20px; } </style> </head> <body> <div class="box">这是一个具有20px左外边距的元素</div> <div class="box2">这是一个具有-20px左外边距的元素</div> </body> </html>
上記のコードでは、同じ幅と高さの 2 つのオブジェクトを作成します。 div 要素はそれぞれ box と box2 です。 margin-left プロパティの値をそれぞれ 20px と -20px に設定すると、ページ上の位置が変更されたことがわかります。
box 要素の margin-left は 20 ピクセルです。これは、親要素の左境界線からの距離が 20 ピクセルであることを示しているため、親要素に対して 20 ピクセル右に移動します。
box2 要素の margin-left は -20px で、親要素の左境界線からの距離が -20px であることを示します。 margin-left は負の値であるため、box2 要素は親要素の境界を超えて左に移動します。
このコード例を通じて、margin-left 属性の役割が明確にわかります。要素の水平位置を制御できるだけでなく、幅を調整したり、空白を作成したりすることもできます。実際の開発では、必要に応じて margin-left 属性を柔軟に使用して、必要なページ効果を実現できます。
以上がCSSのmargin-leftプロパティとその機能とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。