miyaネガティブマージン
マージンは負の値を持つことができます。
負の値を持ったマージンをネガティブマージンと言います。
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;
}
