左マージンを持つブロック要素のCSSでの配置

marginの値autoは、実際には中央揃えだけではありません。 この値は、実際にはマージンを自動的に計算して可能な限り最大にすることができます。 左右のマージンにautoを設定すると、要素は中央に配置されます。

しかし、左マージンだけを設定することもできます。 この場合、要素は可能な限り最大の左マージンを取得し、最も右の位置を占めます：

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  margin-left: auto; /* 自動的な左マージンを設定 */
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

Результат: