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

「クラスを持つコンテナ」 マージン分割 」を適用し、「 スタイル ”属性として” ボーダー:1px ベタ黒 」。その後、「

' 鬼ごっこ：

< 分周 クラス = 「マージン分割」 スタイル = 「border:1px ベタ黒」 >
< p >Linuxhint は最高のチュートリアル Web サイトの 1 つです。< br >
< / p >
< 分周 >

出力

次に、「.margin-div」クラスに「margin」プロパティを適用します。

.margin-div {
バックグラウンド- 色 : RGB ( 199 、 238 、 205 ) ;
フォント- サイズ ： 中くらい;
国境 : 3px RGB ( 114 、 250 、 114 ) ;
マージン: 100px 100px 100px 100px;
}

上記のコードでは、「 .margin-div 」を使用して div 要素にアクセスし、以下のプロパティを適用します。

• 「 背景色 」プロパティは、背景に色を適用するために使用されます。
• 「 フォントサイズ 」を利用して、フォントのサイズを調整します。
• 「 マージン 」は、要素の外側にスペースを割り当てます。たとえば、「margin」プロパティを「 100px 」。

ここで、「 マージン ” 2 番目のプロパティ “ 分周 ' エレメント：

CSSで「パディング」を利用するには?

「パディング」プロパティを使用するために、上記の例が利用されています。 2番目の「 分周 ” コンテナ、クラスを使用 “ padding-div 」でパディングを適用します。

< 分周 クラス = 「リナックス」 >
< p > Linuxhint は最高のチュートリアル Web サイトの 1 つです < / p >
< / 分周 >
< 分周 クラス = 「パディング-div」 スタイル = 「border:1px ベタ黒」 >
< p >Linuxhint は最高のチュートリアル Web サイトの 1 つです。< br >
< / p >
< / 分周 >

出力

「」にパディングやその他の CSS プロパティを適用するには .padding-div 」クラス、提供されたコードを見てください：

.padding-div {
バックグラウンド- 色 : RGB ( 199 、 238 、 205 ) ;
フォント- サイズ ： 中くらい;
パディング: 50px 50px 50px 50px;
}

上記のコードでは、2 番目の「 分周 「クラスを使用する要素」 .padding-div 」。 「背景色」と「フォントサイズ」を設定しました。さらに、「 パディング ” プロパティは、要素コンテンツの両側にスペースを追加するために使用されます。 50px 」。

出力

CSSの「パディング」と「マージン」の違いと使い方を解説しました。

結論

CSS「 マージン 」は、要素の周囲の間隔を設定するために使用されますが、「 パディング 」は、要素コンテンツの周りにスペースを追加するために使用されます。マージンまたはパディング プロパティを適用するには、まず「 分周 」コンテナを指定し、クラスを指定します。その後、クラス名でクラスにアクセスし、「 マージン ' と ' パディング ' プロパティ。この投稿では、CSS でのマージンとパディングの使用について説明しました。