CSS のマージンとパディングについて知っておくべきこと

オンライン ストア開発のベスト プラクティスは、その構造、機能、応答性を決定する主要な Web デザインの側面に集約されます。e コマース Web サイトを作成するためにコーディングを理解する必要はなくなりましたが、ストア ページを有意義にカスタマイズするために、基本的なコア概念を習得することがますます重要になっています。

CSS スタイル設定の概念は、Web ページの外観と機能を制御する主要な要素の一部であり、この記事では、マージンとパディングに重点を置いて説明します。

これらが何なのかわからない人のために説明すると、パディングとマージンのプロパティにより、開発者はストア ページ上の要素の周囲のスペースを制御できるようになります。つまり、ユーザーが Web デザインの外観と雰囲気をカスタマイズするのに役立ちます。

マージンとパディングは Web 開発で広く使用されている要素ですが、初心者開発者の多くは、どちらも誤解しています。これらは CSS ボックス モデルに不可欠な要素であり、理解することで、e コマース サイトに意味のある変更を加えることができます。

これらを顧客エンゲージメント戦略の基盤として考えてください。

幸いなことに、この記事ではマージンとパディングについて知っておくべきすべてのことを詳しく説明しています。CSS のマージンとパディングの問題について取り上げ、それらの違い、使用する場合、および追加方法について説明します。

概要

• マージンとパディングとは何ですか?
• パディングとマージンの違い
• パディングは背景色の影響を受けますが、マージンは影響を受けません
• 余白は自動に設定できるが、パディングは自動に設定できない
• パディングは内部のスペースを制御し、マージンは要素間のスペースを制御します。
• パディングはインライン要素を無視できるが、マージンは無視できない
• マージンは負の値になるが、パディングは負の値にならない
• マージンとパディングを使用する場合
• マージンとパディングを追加する方法
• CSS でマージンを追加する方法
• CSS でパディングを追加する方法
• 結論

パディングとマージンに関する議論を始めるにあたり、それぞれのプロパティの意味を以下に示します。

1. マージンとパディングとは何ですか?

マージンは基本的に、Web ページ上の見出し、ナビゲーション バー、画像、本文コンテンツなどの要素の周囲の領域を指します。多くの場合、コンテンツの周囲の領域、つまり 2 つの個別の要素の境界間のスペースを占めます。

CSS ボックス モデルの一部として、マージンは HTML 機能を囲むことが多く、要素を Web ページの上下または左右に移動できます。予想どおり、要素の周囲のスペースは常に透明であるため、マージンには背景色がないことがよくあります。

マージンはコンテンツ領域の周囲のスペースであり、要素の周囲のギャップを削除または追加することでコンテンツ スペースのサイズを拡大したい場合に簡単に使用できます。

一方、パディングは要素とその中のすべてのコンテンツの間のスペースです。CSS ボックス モデル内の境界線とコンテンツ要素の間の領域と考えてください。

本質的には、画像やテキストを特定の境界内に囲み、それらが CSS ボックス モデルや周囲の境界線に触れるのを防ぎます。

マージン プロパティとは異なり、パディングはコンテナー内のスペースを操作できます。つまり、パディングを使用して、コンテナー内で 2 つ以上の要素がどのように配置され、表示されるかを決定できます。多くの場合、パディングは特定の背景の周囲に要素を表示し、主に背景色の影響を受けます。

これを使用してスペースや隙間を作成すると、要素のサイズが拡大するか、内部のスペースが縮小されます。最も優れている点は、ストア ページをデザインするときに、必要に応じてパディングを自由に変更して使用できることです。

オンライン ストアの Web サイトは、多くの場合、市場の顧客に対するビジネスの第一印象を決定します。これは、顧客があなたと取引するかどうかを決める前に最初に検討する重要なツールであり、顧客に印象づけるにはほんの数秒しかありません。

魅力がなく時代遅れの Web サイトを持つ企業は、魅力的な Web ページを持つ企業よりも、潜在的なリードを失う可能性が高くなります。

言い換えれば、Web デザインは顧客がブランドをどのように認識するかに影響を与えることが多く、ここでの選択によってビジネスが成功するか失敗するかが決まります。2 つの主要な CSS プロパティについて理解できたので、その主な違いを詳しく調べ、パディングとマージンが Web サイトで新しいリードを引き留めるのにどのように役立つかをさらに見ていきましょう。

2. パディングとマージンの違い

Web デザインでは、マージンとパディングの両方が、追加のスペースやギャップを作成するためによく使用されます。これらは通常、ページ要素の 4 辺すべてを対象としており、機能は似ていますが、違いはあります。

ここまでで、要素間にスペースを追加するには margin を、内部要素とスタイル ボックスの間にスペースを追加するには padding を使用できることがおわかりいただけたと思います。残念ながら、多くの開発者が誤ってこの 2 つを同じ意味で使用し、最終的にユーザー エクスペリエンスを台無しにしています。

パディングとマージンの主な違いは次のとおりです。

01. パディングは背景色の影響を受けますが、マージンは影響を受けません

パディングまたはマージンによって作成されたスタイルスペースは、主に目に見えません。ただし、背景色が追加されると、パディングが要素の色を占有し、見えなくなることがよくあります。

一方、余白は主に透明で、背景色の変更の影響を受けません。そのため、背景色を追加するとパディングがより目立つようになりますが、余白は非表示のままになります。

02. マージンは自動に設定できるが、パディングは自動に設定できない

開発者が頻繁に直面する最大の課題の 1 つは、要素を中央に配置することです。ただし、固定幅または幅を持つ任意の要素に margin auto を使用することで、任意の要素を簡単に中央に配置することができるため、そうする必要はありません。

この設定により、要素は自動的に水平方向に中央揃えされます。初心者開発者にとって便利なヒントとして考えてください。ただし、自動に設定することはできないため、パディング中は適用されないことに注意してください。

03. パディングは内部のスペースを制御し、マージンは要素間のスペースを制御します

マージンとパディングはどちらも Web デザインにおけるスペースの制御に役立つという点では一致しているので、これは皮肉に聞こえるかもしれませんが、これは重要な類似点であり、両者の主な違いの根底にある核心です。

定義から、パディングは多くの場合、開発者に特定の境界内の要素のコンテンツ間のスペースを制御する機能を提供します。同時に、マージンは境界とその周囲のすべての要素間のスペースを決定します。

簡単に言えば、マージンは要素間の間隔を制御し、パディングは要素内のスペースを制御します。

04. パディングはインライン要素を無視できるが、マージンは無視できない

インライン要素にパディングを追加すると、変更は要素の右側と左側にのみ適用され、上部と下部には適用されません。ただし、同様のマージン設定は、上部と下部の構成を含む 4 つの側面すべてに影響します。

05. マージンは負の値になるが、パディングは負の値にならない

開発者は、異なる要素を重ね合わせたいときは、マージンに負の値を指定することがよくあります。そのため、この設定は通常、美しく本格的な Web デザインを作成するときに役立ちます。

残念ながら、パディングの値は正の値しか取れません。パディングに負の値を指定すると、境界線がコンテンツに折り込まれ、コンテンツ領域がコンテンツのサイズを超えて縮小されます。

3. マージンとパディングを使用する場合

一見すると、マージンとパディングはどちらも Web ページに対して同じ特別な力を持っているように見えます。しかし、前の説明ですでに見たように、パディングは境界線内の内部スペースを制御するのに対し、マージンは外部スペースを制御することがよくあります。

したがって、CSS のパディングは主に、div やその他の要素に境界のアウトラインから余裕を持たせるために機能します。

簡単に言えば、パディングを使用して境界線内のスペースをカスタマイズできます。その結果、コンテンツが読みやすくなり、ページの見栄えが良くなります。

逆に、マージンを使用すると、すべての表示要素が互いに衝突するのを防ぐことができます。たとえば、字幕が CTA ボタンに重ならないようにしたい場合、またはその逆の場合は、字幕と CTA ボタンの間に余分なマージンスペースを設けて、それらを離しておきます。

そうすることで、Web ページに余白が追加され、オンライン ストアを訪れたユーザーの全体的な顧客エクスペリエンスが向上します。

ただし、異なる要素が他の要素のスペースに侵入したり、重なったりすることを視覚的に確認したい場合は、余白に負の値を指定できることに留意してください。開発者は主に、顧客に芸術的な印象を与えるためにこれを行います。

異なるスタイル要素はマージンとパディングで異なる動作をすることが多いため、この 2 つを選択する際に考慮すべき重要なヒントをいくつか紹介します。

• パディングを使用する:
• 内容物が容器の端に触れないようにするため
• コンテンツのサイズに影響を与えずにコンテンツブロックのサイズを増やす
• 内部要素と親ボックスの間にもっとスペースが欲しいとき
• 隙間に要素の背景を反映させたい場合

• マージンの使用:
• 写真のキャプションなどの要素の周囲にスペースを追加する
• 要素を水平方向に中央揃えする
• 要素を重ねるには負のマージンを使用する
• 要素を上、下、右、左に移動する

特に Web 開発の初心者の場合、これらすべてを自分で理解して試すのは大変すぎるかもしれません。幸いなことに、 PageFlyのようなページ ビルダーが多数あり、それらを使用してストア ページをより迅速かつ簡単にカスタマイズできます。

ほとんどの e コマース プラットフォームと互換性があり、時間を節約でき、使用にコーディング経験は必要ありません。今すぐ試してみるべき理由がすべて揃っています。

4. マージンとパディングを追加する方法

01. CSSで余白を追加する方法

マージンを追加するには、まず 4 つの側面すべてを宣言して、それらが互いに衝突しないようにする必要があります。4 つのマージンは次のとおりです。

• 上余白
• 右余白
• 下余白
• 左余白

最も良い点は、各プロパティを 1 つの宣言で設定できるため、すべてを個別に設定する必要がなくなることです。マージンの長さやパーセンテージを変えたい場合は、個別に設定できます。

たとえば、以下のコードを使用すると、余白の上部に 30 ピクセル、右側に 75 ピクセル、下部に 45 ピクセル、左側に 100 ピクセルを追加できます。

ｐ {

余白: 30px 75px 45px 100px;

}

この効果は時計回りに要素の周りを回ることに注意してください。また、CSS でパーセンテージを追加する場合は、すべての余白のサイズが同じになるように、親ボックスのインライン サイズにする必要があることに注意してください。

ただし、マージンを使用する場合の主な問題の 1 つはマージンの相殺であり、これは通常、小さいマージンが大きなマージンに重なる場合に発生します。

良い例としては、見出しの margin-bottom のすぐ後に段落の margin-top が続く場合、それらは折りたたまれて結合されます。

幸いなことに、ブロック フォーマット コンテキスト (BFC) または Flex および グリッド コンテナーを使用すると、このような事態を防ぐことができます。

利便性のために、PageFly ページ エディターの余白セクションを使用してコンテナーの外側のスペースを簡単に制御し、必要な変更を加えることができます。

02. CSSでパディングを追加する方法

margin の場合と同様に、特に CSS で padding を扱う場合は、最初にすべての padding プロパティを宣言することが常に最善です。これは主に次の宣言を含む標準的な手順です。

• パディングトップ
• 右パディング
• パディングボトム
• 左パディング

ここでは、すべてのパディング プロパティに、パーセンテージや長さなどの特定の特性が一般的に設定されています。ただし、マージンの場合と同様に、これらすべてを 1 つの宣言で設定できます。

たとえば、以下のコードを使用すると、パディングの上部に 20 ピクセル、右側に 25 ピクセル、下部に 50 ピクセル、左側に 75 ピクセルを追加できます。

div {

パディング: 20px 25px 50px 75px;

}

これも要素の周りを時計回りの順序で進むことに注意してください。

また、PageFly ページ エディターのパディング セクションに必要な宣言メジャーを挿入するだけで、コンテナー内に必要なスペースの量を簡単に制御できます。それだけです。すべてが自動化されており、コーディングを行う必要はありません。

ただし、padding left、padding top、padding right、padding bottom という 4 つの重要な宣言に注意してください。

5. 結論

オンライン ストアの Web デザインは、ターゲット ユーザーがあなたのビジネスをどう認識するかに大きく影響します。オンライン ストアの基盤に影響し、ビジネスの成否を左右する可能性があります。

ウェブ開発では、空白スペースを効果的に使用することが通常重要です。これは、空白スペースが読みやすさ、ページ階層、フォーカス、理解度に本質的に影響するためです。これらは、ユーザー エクスペリエンスの向上に貢献する主な要素であり、ウェブ開発の基本概念を知っておく必要があるのはそのためです。

CSS のマージンとパディングはボックス モデルで習得すべきコア概念の一部ですが、この 2 つを混同してはいけません。

これらは両方とも目的が異なり、互換的に使用すべきではありません。

マージンを使用すると境界線の外側のスペースを制御できますが、CSS のパディングを使用すると境界線間のスペースをカスタマイズできます。この記事では、マージンとパディングの違い、それらをいつ使用するか、さらに役立つヒントをいくつか紹介します。

PageFly のようなページ ビルダーを使用すると、コーディングの経験がなくても、最短時間でストア ページを完全にカスタマイズしてパーソナライズできることを覚えておいてください。