マージン、パディング、間隔、配置の概要

詳しい説明については GemPages v7でマージンとパディングを使用する方法以下のチュートリアルをご覧ください。

マージンとパディング

マージン 要素の境界線の外側のスペースで、その要素と隣接する要素の間に距離を作成します。上、右、下、左の辺を調整できるため、レイアウトと視覚的な分離を制御できます。

パディング一方、パディングは要素の境界内のスペースであり、コンテンツと端の間のクッションとして機能します。マージンと同様に、パディングは各側で調整でき、コンテンツが要素の境界に触れないようにすることができます。

間隔

間隔とは、ページ上のさまざまな要素間のギャップと全体的な距離を制御するために行われる調整を指します。

たとえば、 に選出しました。 行要素間隔設定を使用して、列の間隔を設定できます。間隔を調整することで、列間の距離を制御し、レイアウトのバランスが取れて見た目が美しく見えるようにすることができます。

役職

GemPagesの位置設定は、ウェブページ上の要素の配置を決める重要な属性です。この属性を使用すると、異なる値を使ってウェブページ上の要素の配置を制御できます。

に行きます 役職 セクションの下に 高機能 左側の設定パネルのタブをクリックします。ここから、ドロップダウンから任意の要素の優先位置を選択できます。

• 静的： 要素のデフォルト値であり、top、bottom、left、right 属性を使用して配置することはできません。
• 相対的： 要素の位置を表示するデフォルトの方法が Static である場合、相対位置を表示する方法は Relative です。初期位置は、ページ上のスペースを占有します。
• 絶対の: 最も近いスクロール親要素に対する要素の位置。
• 一定： ビューポートに対する要素の相対的な位置。
• スティッキー： 親要素に対する要素の相対的な位置。

マージン、パディング、間隔に関するよくある質問

1. 画像が中央に配置されず、右にずれたり重なったりして表示されるのはなぜですか?

これは通常、 パディング 要素の片側の値が高すぎる設定になっています。

左または右のパディングを減らすか、パディングをデフォルト値にリセットしてみてください。

問題が解決しない場合は、 マージン 設定を使用するか、 役職 オプション (例: 中央) を使用して要素を再配置します。

2. コンテンツが要素の端に触れないようにするにはどうすればよいですか?

パディング 要素の内側。

パディングにより、コンテンツと要素の境界の間にスペースが作成され、デザインのバランスが取れて読みやすくなります。

3. 2 つの要素の間にスペースを作成する最適な方法は何ですか?

　 マージン 要素の境界線の外側に距離を追加します。

たとえば、見出しに margin-bottom を適用すると、その下の次の要素の前にスペースが作成されます。

4. 行要素内の列間のギャップを調整するにはどうすればよいですか?

に行きます 間隔 行要素の設定を増やし、 コラムギャップ.

これにより、列間の距離が制御され、レイアウトがより均一に見えるようになります。

5. マージンやパディングの代わりに位置設定を使用する必要があるのはどのような場合ですか?

　 役職 要素がページ上のどこに配置されるかを正確に制御する必要がある場合 (例: 固定ヘッダー、固定バナー)。

一般的なレイアウトの間隔としては、通常、マージンとパディングの方が適しています。