ブロック
Bulmaの最も基本的なスペーサー**ブロック**
`block`要素は、単純な**スペーサーツール**です。これにより、**兄弟** HTML要素間に一定のマージンを設けることができます。
例
HTML
<div class="block">
This text is within a <strong>block</strong>.
</div>
<div class="block">
This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div class="block">
This text is within a <strong>third block</strong>. This block has no margin at the bottom.
</div>ご覧のとおり、最初の2つのブロックには `margin-bottom`が適用されていますが、**3番目のブロックには適用されていません**。これは、Bulmaが**最後のブロックを除く**すべてのブロックにスペースを適用するためです。つまり、必要な数のブロックを使用でき、スペーシングは**ブロック間**にのみ表示されます。
`block`を使用しないと、HTML要素間にスペースがありません
例
HTML
<div>
This text is <em>not</em> within a <strong>block</strong>.
</div>
<div>
This text <em>isn't</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div>
This text is also <em>not</em> within a <strong>block</strong>.
</div>実際には、知らず知らずのうちに `block`を**既に使用しています**。そのCSSプロパティは、複数のBulma要素とコンポーネントで**共有**されています。
ブレッドクラムレベルメッセージページネーションタブボックスコンテンツ通知その他プログレステーブルタイトルこれは、 `@extend %block` Sassプレースホルダー機能のおかげです。
比較すると、次のようになります
ブロックなし
エラー
ブロックあり
エラー
使用しているBulma要素とコンポーネント、およびそれらの順序に関係なく、それらの間には**一定のスペース**があります。
ご覧のとおり、 `block`のCSSは非常にシンプルです。**最後のものを除く**すべての兄弟に `margin-bottom`を適用します。
.block:not(:last-child) {
margin-bottom: 1.5rem;
}これにより、最後の兄弟が下部に不要なスペースを追加するのを防ぎます。
|
Sass変数
|
CSS変数
|
値
|
|---|