レスポンシブ デザインでスペースとパディングを管理する方法

この実践的なガイドでは、レスポンシブ デザインでスペースとパディングを管理する方法を説明します。

レスポンシブ デザインでスペースとパディングを管理するにはどうすればよいですか?

レスポンシブデザインのパディングとスペースは、CSS を使用して管理できます。スペースとパディングの管理の実際的なデモンストレーションを以下に示します。

ステップ 1: HTML 構造を作成する

まず、HTML 構造とその中にテキストを作成します。

そして

タグ:

< 体 >
< h2 > レスポンシブ CSS パディングとスペース < / h2 >
< ディビジョン > この CSS 要素のパディングは 80 ピクセル、間隔は 40 ピクセルです。 < / ディビジョン >
< / 体 >

ステップ 2: CSS を適用する

---

---

それでは、CSSを適用してみましょう

鬼ごっこ。まず、「」を設定します。 パディング ” プロパティ値を “ 80ピクセル 」を選択して要素の周囲に空間を作ります。次に「」を設定します。 マージン ” プロパティ値を “ 40ピクセル 」を選択し、境界線の外側の要素の周囲にスペースを作成します。最後に「」を使用します。 国境 ” プロパティを使用して、境界線と色を指定して境界線を作成します。

ディビジョン {
パディング : 80ピクセル ;
マージン : 40ピクセル ;
国境 : 1ピクセル 固体 緑 ;
}

上記の出力は、スペースとパディングが適用されていることを確認します。

ブラウザ ウィンドウを縮小して、応答するかどうかを確認してみましょう。

ウィンドウを縮小すると、コンテンツが応答的に動作し、適用されたパディングとスペースが応答していることが確認されます。

結論

レスポンシブ デザインでスペースとパディングを管理するために、CSS プロパティが存在します。レスポンシブデザインにパディングを追加するには、「 パディング ' 財産。同様に、「」を使用してレスポンシブデザインにスペースを追加できます。 マージン ' 財産。この記事では、レスポンシブ デザインでスペースとパディングを管理するソリューションをユーザーに紹介しました。