要素間の間隔を追加または削除する

間隔とは何ですか?

間隔は、いつも意識しているわけではないかもしれませんが、Web デザインの重要な部分です。適切な間隔は、主要な要素に注意を向けることで視覚的な階層を強化し、テキストが読みやすくなることで読みやすさを向上させ、より魅力的でナビゲートしやすいデザインを作成することでユーザー エンゲージメントを高めます。

間隔調整の種類

1. パディングとマージン

パディング の三脚と マージン これらはページ上の間隔を制御する 2 つの重要な要素ですが、目的は異なります。

• マージン 要素の境界線の外側のスペースです。ページ上の要素と他の要素の間のスペースを制御します。マージンは透明で、要素を周囲のコンテンツから押し出し、その周囲にバッファを作成します。

GemPages では、マージンを使用して、2 つの画像間やボタンとテキスト ブロック間などの異なる要素間の距離を制御し、視覚的な分離や空白を作成することができます。

• パディング 要素の境界線の内側でコンテンツの外側にあるスペースです。要素のコンテンツ (テキストや画像など) と要素の境界線の間のスペースの量を定義します。

GemPages では、要素内にスペースを作成するときにパディングが使用されます。たとえば、ボタンにパディングを追加して、内部のテキストの周囲にスペースを確保し、ボタンを大きくしたり、視覚的にバランスをとったりすることができます。

これらの仕組みについて詳しく知りたい方は、 マージンとパディング。

2. 列と行の間隔

グリッドやグループ化された要素を使用している場合、列と行の間のスペースを調整することが、すっきりとしたレイアウトの鍵となります。方法は次のとおりです。

• 列間隔: 列間のスペースを広げるには、 列ギャップ Row 要素の設定。
• 行間隔： 　 上余白 の三脚と ボトム 行要素に適用して、それらの間の垂直方向のスペースを制御します。

3. 行間と文字間隔

テキストに関しては、適切な行間隔と文字間隔によって読みやすさに大きな違いが生じます。

• 行間隔（行の高さ）: 段落を読みやすくするために、テキストの行間のスペースを調整します。
• 文字間隔： 明瞭性を向上させるために、個々の文字間の間隔を変更します。

GemPages を使用して要素間にスペースを追加する方法

ステップ 1： の中に GemPages エディター間隔を追加する要素をクリックします。

ステップ 2： 高機能 タブを見つけて、 マージンとパディング のセクションから無料でダウンロードできます。

ステップ 3: 設定を調整して必要な間隔を追加するか、プリセット値を選択します。

GemPages を使用して要素間のスペースを削除する方法

ステップ 1： 高機能 タブを見つけて、 マージンとパディング のセクションから無料でダウンロードできます。

ステップ 2: すべての間隔値を 0 スペースを削除します。