--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/spacing' title: 'エレメントの内側と外側の間隔 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:21:17+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 色付きボックス内のテキストに余白を持たせることも、上の段落からボタンを離すこともできます。パディングはエレメントの縁の内側の空間、マージンは外側の空間です。どちらもStyleパネル上部のボックスモデルで設定します。テーマと新しいセクションは独自の間隔を持ちます。このページでは自分の設定との付き合い方を説明します。 動画ではボタンに24 pxの上マージンを付けています。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: エレメントの内側と外側の間隔 description: |- 色付きボックス内のテキストに余白を持たせることも、上の段落からボタンを離すこともできます。パディングはエレメントの縁の内側の空間、マージンは外側の空間です。どちらもStyleパネル上部のボックスモデルで設定します。テーマと新しいセクションは独自の間隔を持ちます。このページでは自分の設定との付き合い方を説明します。 動画ではボタンに24 pxの上マージンを付けています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:21:17+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/spacing' articleSection: エレメントのスタイル - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/spacing' description: |- 色付きボックス内のテキストに余白を持たせることも、上の段落からボタンを離すこともできます。パディングはエレメントの縁の内側の空間、マージンは外側の空間です。どちらもStyleパネル上部のボックスモデルで設定します。テーマと新しいセクションは独自の間隔を持ちます。このページでは自分の設定との付き合い方を説明します。 動画ではボタンに24 pxの上マージンを付けています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[エレメントのスタイル](/ja/hc/documentation/learn-dxpr-builder/element-settings) # エレメントの内側と外側の間隔. DXPR Builderを学ぶページを作るエレメントのスタイル ## このガイドの内容 関連ガイド - [文字サイズと色の変更](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography) 色付きボックス内のテキストに余白を持たせることも、上の段落からボタンを離すこともできます。パディングはエレメントの縁の内側の空間、マージンは外側の空間です。どちらも**Style**パネル上部のボックスモデルで設定します。テーマと新しいセクションは独自の間隔を持ちます。このページでは自分の設定との付き合い方を説明します。 動画ではボタンに24 pxの上マージンを付けています。 ## 始める前に - ページをDXPR Builderで開きます。エレメントにポイントすると**More**付きのコントロールバーが表示されます。ビルダーが初めての場合は[最初のページ](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。 - **Save**（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにある**Save**でページを保存し、「Saved field」と表示されます。 - **ボックスモデル**を1ページ内の1か所の隙間の修正に使います。 - **テーマやクラス**を繰り返す間隔に使います。セクション間の隙間などが該当します。 - **尺度を揃えます。** すべての隙間が数種類のサイズから来ると、ページは落ち着いて見えます。 | サイズ | 用途 | |---|---| | 8 px | グループ内の小さな隙間（アイコンとラベルなど） | | 16 px | 関連する項目の間 | | 24 px | コンテンツブロックの間 | | 32 px | カードや強調ボックスの内側 | | 48 px | セクションの間 | ## 手順：ボタンまわりの余白 1. ページ上で**Button**にカーソルを合わせ、**More**、**Settings**の順にクリックします。 2. 次に**Style**パネルを開き、ボックスモデルの外側リングである**Margin**の上辺をクリックします。ロックは開いた状態から始まるため、この辺のみ変わります。 3. 単位ボタンが**PX**なのを確認します。値フィールドに24と入力してEnterキーを押します。その辺が24pxになり、ボタンが下がります。 4. ダイアログの**Save**、次にツールバーの**Save**をクリックします。 Buttonではマージンがボタン自体に付くため、空間はその縁から始まります。 ## 手順：背の高いセクション 新しいセクションには**Vertical padding size 5 (py-5)**クラスの上下パディングが付くため、ボックスモデルより優先されます。先にそのクラスを外します。ダイアログのタイトルがRowやColumnではなくSectionなのを確認します。 1. ページ上で**Section**にカーソルを合わせ、**More**、**Settings**の順にクリックします。 2. 開くのは**General**パネルで、**HTML classes**を探し、**Vertical padding size 5 (py-5)**チップの×をクリックします。セクションの上下の空間が減ります。そのチップがなければ、この手順は飛ばします。 3. 次に**Style**パネルを開きます。**Padding**の上辺をクリックし、96と入力してEnterキーを押します。 4. 同様に**Padding**の下辺も設定します。両辺が96pxになり、セクションが背高くなります。 5. ダイアログの**Save**、次にツールバーの**Save**をクリックします。 ## 表示内容 設定した各辺の値がボックスモデルに表示されます（例：24px）。ボタンは24 px下がり、セクションにはコンテンツ上下に96 pxの余白が付きます。 ## ボックスモデルの仕組み ```text +----------------- Margin ------------------+ || +-------------- Border ---------------+ | || | +----------- Padding ------------+ | | || | | | | | || | | width × height | | | || | | | | | || | +--------------------------------+ | | || +-------------------------------------+ | +-------------------------------------------+ ``` - 各リングに4辺があります。辺には値（例：24px）が表示され、未設定では「-」です。 - 辺をクリックすると、スライダー、値フィールド、単位ボタンを持つ小さなピッカーが開きます。単位は**PX**か**%**です。**Border**はpxのみです。 - 値を入力してEnterキーを押すか、スライダーをドラッグします。上下の矢印キーでは値が1ずつ変わります。Escapeでピッカーを閉じます。 - 辺の設定解除は、値フィールドを空にしてEnterキーを押します。その辺が「-」になり、テーマの設定に戻ります。 マージンは-200から200、パディングは0から200、境界線は0から50です。幅と高さは0から2000です。負のマージンではエレメントが隣に引き寄せられます。範囲外の入力値は最も近い上限値に切り詰められます。 ### ロック 各リングの名前横（**Margin**、**Border**、**Padding**）にロックがあります。ロックが閉じていると、1辺の設定値が4辺に反映されます。開いていると、各辺が独自の値を保持します。ロックを閉じても既存値は変わりません。次に設定する値のみコピーされます。 ### パーセント、サイズ、画面幅 パーセント値は、上下も含めエレメントの親の幅に対する割合です。そのため上パディング10%は、狭いカラムより広いカラムで高くなります。 ボックスモデルの中央は幅×高さです。ImageやMapのように自前でサイズを決めるエレメントは、この2つのボックスを無視します。 ボックスモデルに画面サイズ別の値はありません。スマートフォンより大画面でパディングを増やすには、代わりにBootstrapクラスを使います。例：`py-3 py-lg-5`では小さい画面で16 px、幅992 px以上で48 pxです。入力方法は[HTML IDとクラス](/ja/hc/documentation/learn-dxpr-builder/element-settings/custom-css)をご覧ください。 ## 自分の値とテーマの間隔の付き合い方 - **新しいセクションにはパディングが付きます。** エディターで追加したセクションには**Vertical padding size 5 (py-5)**クラスが付きます。上下約48 px（3rem）です。このクラスは`!important`付きのため、上下の**Padding**より優先されます。左右のパディングは有効です。 - **間隔クラスが優先されます。** **HTML classes**にあるBootstrap間隔クラス（例：**Top margin size 3 (mt-3)**）は、同じ辺の自分の値に勝ちます。 - **カラムには隙間が残ります。** Bootstrapは各カラムの左右に12 pxのパディングを付けます。Columnの左右**Padding**はそれを置き換えるため、コンテンツは隣のカラムと揃わなくなります。 - **段落は独自の間隔を保持します。** テーマは各段落と見出しの下に空間を置きます。ボックスモデルはエレメント全体に作用するため、その空間は変わりません。 - **隣のマージンは通常重なります。** あるエレメントが他の上に載るとき、上のエレメントの下マージンと下のエレメントの上マージンが隙間を共有します。大きい方が優先され、足し算にはなりません。 ## 表示されない場合 - **セクションの上下パディングが効かない。** **Vertical padding size 5 (py-5)**クラスが優先されています。**HTML classes**でそのチップを外します。 - **マージンやパディングの値が効かない。** 同じ辺のBootstrap間隔クラスが優先されています。そのチップを外すか、クラスのみ使います。 - **パディングが見えない。** エレメントに背景も境界線もないため、空間が見えません。調整中は**Background**色を付けます。 - **値が200に跳んだ。** パディングとマージンは200、境界線は50までです。小さい値かパーセントを使います。 - **スマートフォンでページが詰まっている。** 同じピクセル値が全画面に適用されます。小さい値、パーセント、レスポンシブクラスを使います。 - **2つの隙間が足し算にならない。** 積み重なったマージンは重なり、大きい方が優先されます。隙間全体を2つのエレメントのいずれかに付けます。 - **カラムが揃わなくなった。** Columnの側面**Padding**がグリッドの隙間を置き換えています。その辺を再び空にします。 ## 次のステップ - [タイポグラフィ](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography)：間隔を付けたボックス内のテキストのサイズと色を設定します。