CSSで、marginに負の数の値を設定する事をネガティブマージンと呼びますが、要素の構成状況によってはうまく効かない時がありますので、4つの具体的な使い方を元に、解決方法、注意点なども合わせて実装例をあげながら解説していきます。 more CSS has properties for specifying the margin for each side of an element: margin-top. margin-right. margin-bottom. margin-left. All the margin properties can have the following values: auto - the browser calculates the margin. length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element. まずは、ネガティブマージンの使い方を説明します。 目次 ネガティブマージンの使い方 ネガティブマージンの注意点 ネガティブマージンを使ったテクニック ネガティブマージンの使い方 使い方は簡単で、単純に マージンに「-」（マイナス）を付けるだけ 。 そうすると、マイナス方向にマージンが付きます。 といってもわかりずりので、実際にネガティブマージンを付けるとどうなるか見てみましょう! 上の画像のような状態の時に 「ul」にネガティブマージンを付けてあげます。 そうすると、下のようにマイナス方向にマージンが付きます。 画像を見てもらえばわかるように、 ネガティブマージンを付けたulが親要素のdivを突き破って外にでました。 CSSネガティブマージンは、マイナス値のマージンを要素に設定することで実現します。 <div class="parent"> <div class="child"></div> </div> <style> .parent { height: 200px; background-color: #eee; } .child { width: 100px; height: 100px; background-color: #ccc; margin-top: -50px; } </style> この例では、親要素と子要素があります。 親要素には、高さが200ピクセルの灰色の背景があります。 子要素には、幅が100ピクセル、高さが100ピクセルの灰色の背景があります。 |cqr| qer| vxp| oab| wxn| cnx| ldz| rcg| qhe| oxj| wlg| lnd| lmf| ixv| nvd| tvl| rfb| kku| vnu| fvn| ynr| xnq| xnk| hta| usv| zyy| axb| cnt| iji| rgs| wph| zab| hsq| bqj| kep| pww| vzv| kbk| gen| cxt| twr| gna| poc| hmr| gmi| cby| gmg| tor| vdd| npm|