Site icon Tips Note by TAM

ネガティブマージン

マージンは負の値を持つことができます。
負の値を持ったマージンをネガティブマージンと言います。

margin-bottom: -10px;

floatと同時に使えないなどのバグもありますが W3Cでも利用が認められているvalidなCSSです。

複数の要素を一列に並べて見せたい場合、
  • floatを使って右と左にわける。
  • positionで表示位置をコントロールする
という方法をよく用いますが ネガティブマージンを使うことによっても コーディングする事ができます。

■HTML

<div>
<p><img src="advan_ttl.gif" alt="TAMの強み" width="148" height="33"></p>
<p>2011.1.1</p>
</div>

■CSS

.wrapper {
    width: 400px;
}
.ttl {
    margin: 0;
    padding: 2px;
    border-bottom: 2px solid #061849;
}

.date {
    margin: -22px 0 0 0;
    padding: 2px 0;
    color: #333333;
    text-align: right;
}
また、 text-indentに負の値を持たせた ぶら下がりインデントはよく用いられる手法です。

■HTML

<div>
<p>※プロジェクトマネージメントの各ステップにおいて、進捗や決定事項をドキュメント化してクライアントと共有。目的のブレないスムーズな進行を実現します。</p>
</div>

■CSS

.copy {
    width: 400px;
}

.copy p {
    margin-left: 1em;
    text-indent: -1em;
}