マージンは、コントロールの周囲のスベースを定義します。ほとんどの場合、マージンは比較的直感で利用できるはずです。行と列の組み合わせにより、コントロールの上と左の位置が決定され、マージンを使ってその位置を調整します。
図 11 – マージン
図 12 では、3 つのボタンがセルの中央左に配置され、ページの下にフローしています。
ボタン 1 に 4 ピクセルのマージンが上下左右に定義されています。このボタンは行の上から 4 ピクセル下に移動され、ボタンはフローしているので、ボタン 2 も同じく 4 ピクセルだけ下に移動されています。ですが、ボタン 1 の左右には目に見えるマージンがありません。このボタンはサイズ調整もフローもないので、互いのマージンがキャンセルされているのです。
ボタン 2 は、同じ 4 ピクセルのマージンが周囲全体に定義されていますが、[サイズ] は [幅に合わせる] が定義されています。この場合は、左と右のマージン両方が評価されます。左のマージンは、左端が右方向に 4 ピクセルだけ移動され、同様に右マージンも右端が左方向に 4 ピクセル移動されます。
ボタン 3 は、ほぼ同じ定義がされていますが、唯一の違いは右のマージンがゼロであるということです。この場合、ボタンは右方向に 4 ピクセル移動されます。
