CSS では、「margin: 0 auto」の auto 属性はどのように機能しますか?

「margin: 0 auto」プロパティは、開発者がコンテナ内で要素を水平方向に中央揃えできるようにする、一般的に使用される CSS プロパティです。 margin 属性の「auto」値を使用すると、センタリング効果を実現できます。

この記事では、「auto」値が margin プロパティでどのように機能するか、およびそれを使用して水平方向の中央揃えを実現する方法について説明します。また、マージン プロパティで "auto" 値を使用するときに発生する可能性のあるエラーとベスト プラクティスについても説明します。

CSS のマージン

このトピックに入る前に、この問題を理解するためにいくつかの基本的な知識を学ぶ必要があります。まず、CSS におけるマージンの意味を学び、次に auto 属性 の理解に進みます。これらすべてを学んだ後にのみ、最初の質問に対する答えに到達することができます。

• CSS の目的は、Web ページを使いやすく、見た目が楽しいようにスタイルし、ユーザーにとって全体的なユーザー エクスペリエンスをよりスムーズで優れたものにすることであると私たちは認識しています。このスタイルには、色、フォント、フォント サイズなどの多くのものが含まれます。スタイル設定方法の 1 つは、要素間に適切な間隔を使用することです。

• 要素の定義された境界の外側のスペースについて話しているときは、実際にはそのマージンについて話しています。マージンを使用すると、要素を他の要素から分離する目に見えない境界線を作成できます。これはパディングに少し似ていますが、パディングは実際には要素の子と周囲の要素の間のスペースです。

• CSS を使用すると、要素のマージンに対して非常に高度な制御とカスタマイズが可能になります。通常はマージンを使用して 4 辺すべてに等しいマージンを作成できますが、マージンを作成することもできます。これは、特定の辺のマージンを個別に定義するために実際にマージンを参照していることを指定することで、4 つの辺すべてで等しくなります。例えば、＃＃＃＃＃＃

  リーリー
ステートメント 1 で設定されたマージンは要素のマージンを 0 に設定しますが、ステートメント 2 で設定されたマージンは上部マージンのみを変更して 25 ピクセルに設定します。

マージンはさまざまな方法で指定できます -

カスタムの長さを使用できます。
ユーザーの画面サイズに基づいて変化するパーセンテージ値を指定できます。
マージンを継承可能にすることもできます。これにより、現在の要素のマージンが親要素のマージンに設定されます。
しかし、マージンを定義するときにどの値を使用すればよいかわからない場合はどうすればよいでしょうか。

自動プロパティ

CSS は、ブラウザが要素のマージンを計算して設定できるようにする属性を提供します。この属性は auto 属性です。このプロパティにより、使用される実際の値を事前に知る必要がなく、ブラウザーに計算させるため、開発者はマージンを簡単に使用できるようになります。

まず、その仕組みを理解しましょう。要素のマージンを auto として指定すると、最初に要素の幅とサイズを計算することによって、すべての辺に等しいマージンが与えられます。

Example

の中国語訳は次のとおりです:

Example

500 ピクセル x 300 ピクセルの寸法を持つ div を考えてみましょう。余白を指定しない場合は、自動的に画面の左上隅に揃えられます。一方、マージンを auto として指定すると、親コンテナー (この場合は body タグ) 内の中央にマージンが配置されます。

リーリー

マージンの使用: 0 自動

さて、2 つの値を使用してマージンを設定しようとするとどうなるでしょうか?マージンを使用して 2 つの値を指定すると、最初の値は上下のマージンの値とみなされ、2 番目の値は左右のマージンに使用されます。

私たちの質問は、「マージンの 2 番目の値として auto 属性を使用すると、どのように機能するか」を説明することです。

答えは、

「左右の余白を自動的に計算することにより、要素を親要素の中央に垂直方向に揃えます。」

Example の中国語訳は次のとおりです:

Example

上の例と同じですが、マージンを 0 auto に設定します。

リーリー ＃＃＃結論は＃＃＃

この記事では、CSS の

margin

の意味、CSS の auto プロパティの役割、および margin の 2 番目の値として使用したときにその動作がどのように変化するかについて学びました。私たちの最初の答えは、左右のマージンを自動的に計算して、要素をその親と垂直方向に揃えることでした。

以上がCSS では、「margin: 0 auto」の auto 属性はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。