マージンとパディングの違いは何ですか

一般的に、ほとんどすべての企業組織がWebサイトを維持しています。これは、組織の製品およびサービスに関する情報を顧客に提供するのに役立ちます。 HTML、CSS、およびJavaScriptは、Webプログラミングに使用される基本的な言語です。 HTMLはWebページの構造を構築するのに役立ち、JavaScriptはコンテンツをインタラクティブにするのに役立ちます。さらに、CSSはCascade Style Sheets（CSS）の略で、Webページをスタイリングで見栄えよくするのに役立ちます。全体として、marginとpaddingはCSSで使用できる2つのプロパティです。

CSS、マージン、パディング

マージンとは

マージンはCSSのプロパティであり、境界線の外側で要素の周囲にスペースを作成するために使用されます。プログラマーは、上、右、下、左のマージンを設定できます。つまり、margin-top、margin-right、margin-bottom、margin-leftを使用してこれらの値を設定できます。

値は次のタイプにすることができます。

まず、autoを使用すると、ブラウザでマージンを計算できます。さらに、長さはpx、pt、またはcmでマージンを示し、％は、含まれている要素の幅に対するパーセンテージとしてマージンを表すのに役立ちます。最後に、inheritは、マージンが親要素から継承する必要があることを示します。

図1：マージンのあるCSSの例

上記はいくつかの例です。最初の例では、定義された値に従って、上、右、下、左のマージンを設定します。 2番目の例では、上、右、下、左の余白を1行で定義します。段落要素の上下に25pxのマージンを割り当て、段落要素の左右に50pxのマージンを割り当てます。最後の例では、すべての余白を段落要素の25pxに設定します。

パディングとは

パディングはCSSのプロパティであり、境界線の内側の要素の周囲にスペースを作成するのに役立ちます。プログラマーは、上、右、下、左のパディングを設定できます。つまり、padding-top、padding-right、padding-bottom、padding-leftを使用してこれらの値を設定できます。

値は次のタイプにすることができます。

長さはpx、pt、またはcmでパディングを表し、％は含まれている要素の幅に対するパーセンテージとしてパディングを示します。最後に、inheritは、パディングを親要素から継承する必要があることを示しています。

図2：パディングを使用したCSSの例

上記はいくつかの例です。最初の例では、定義された値に従って、上、右、下、および左のパディングを設定します。 2番目の例では、上、右、下、左のパディングを1行で定義します。段落要素の上下に25pxのマージンを割り当て、段落要素の左右に50pxのマージンを割り当てます。最後の例では、すべてのパディングを段落要素の25pxに設定します。

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

意味

マージンは、定義された境界線の外側の要素の周囲にスペースを作成するために使用されるCSSプロパティです。一方、パディングは、定義された境界線の内側の要素の周囲にスペースを作成するために使用されるCSSプロパティです。したがって、これはマージンとパディングの主な違いを説明しています。

値

さらに、marginの値はauto、length、％、またはinheritにすることができますが、paddingの値はlength、％、またはinherittypeにすることができます。したがって、これはマージンとパディングのもう1つの違いです。

結論

簡単に言うと、マージンとパディングは、Webページのスタイルを設定できるCSSの2つのプロパティです。これらのプロパティに負の値を割り当てることはできません。マージンとパディングの主な違いは、マージンは境界の外側の要素の周囲にスペースを作成するのに役立ち、パディングは境界の内側の要素の周囲にスペースを作成するのに役立つことです。