Webページを作成するにあたって重要なことは、ユーザーが読みやすいページを意識して作成することです。見やすさを意識するのにもっとも欠かせないものが余白になります。
レスポンシブスペーサーはその余白を適切に取れるよう、様々な設定項目が用意されています。

設定項目

名前の通り、レスポンシブにも対応できPC / タブレット / モバイルの高さの設定ができます。単位はpx / em / rem / vwと変更可能です。

余白の設定

余白の設定は小 / 中 / 大 / Custom から選べます。

margin-topで余白を指定することで余白の高さを揃えやすくなります

VK Blocks 0.49.0以降では、margin-topでも余白を指定できるようになりました。スペーサーがheight指定だとスペーサー上の要素のmargin-bottomが異なるため、同じ高さの余白を作りにくかったのですが、margin-topを選ぶことで余白の高さを揃えやすくなります。

「余白タイプ」で「height」か「margin-top」を選択できます。

例えば、画像ブロックで配置した画像には、オレンジの部分がmargin-bottomとして指定されていますが、「余白タイプ」で「margin-top」を選ぶと、上部要素のmargin-bottom が相殺します。

  • height : 余白を加算します。
  • margin-top : 上部要素に margin-bottom がある場合は、相殺して上の要素の margin-bottom かレスポンシブスペーサーの margin-top の大きい方の余白になります。
余白タイプ:height
余白タイプ:margin-top

heightの場合

margin-topの場合

余白タイプは個別に指定できます

共通余白「 小 / 中 / 大 」または「カスタム」いずれを選んでも、余白タイプをプルダウンで margin-top か height かを個別に指定できます。

共通余白をデバイス毎に任意のサイズに指定できます

共通余白「 小 / 中 / 大 」(カスタム以外)で設置する際の余白をデバイス毎にサイズ指定することも可能です。あらかじめお好みのサイズに指定しておけば、コンテンツを作成する時に大変便利です。

共通余白 小 / 中 / 大

サイズ指定は、管理画面の 設定 > VK Blocks 「共通余白設定」で設定できます。単位 px / em / rem から選び、画面サイズ毎にサイズを指定してください。変更を保存後は、すでに設置済みの「 小 / 中 / 大 」の余白にもそのサイズが反映されます。