ネガティブマージンとは 通常 margin には 0以上の値 を指定して余白を設定しますが、負の値つまり マイナスを指定することも可能 です。 この マイナスを指定した利用方法はネガティブマージン (マイナスマージン) と呼ばれています。 通常要素同士を重ねる場合「 position: relative;とposition: absolute; 」を使いますが、場合によっては ネガティブマージンを利用したほうが便利なケース がありますので、ケースバイケースでネガティブマージンを活用していきましょう。 要素の重ね方ずらし方 それでは、実際にネガティブマージンを使った具体例を解説していきます。 また、最後の例ではpositionを使った例も挙げています。 img要素にp要素を重ねる 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. About External Resources. You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. ネガティブマージンとは、「margin」プロパティの値をマイナスにした時に使う呼び方です。 つまり下記みたいなこと↓ .hoge { margin-top: -100px; } 数値をマイナスにすることで、通常のmarginとは逆向きに効くことが可能になります。 実際に使ってみた 実際にサンプルを作成して使ってみました! 下記を見てみるとわかりやすいかと↓ <div class="box"> <div class="box__item01"> 通常のボックス </div> <div class="box__item02"> ネガティブマージン <br> margin-top: -30px, <br> margin-right: -30px;をかけてます! </div> </div> |gin| dvz| ddp| jii| mrr| fvk| wrd| tml| vzw| kfk| off| qft| yuh| gzf| ekb| gkz| bde| tly| zyl| qpw| iyb| vbw| ufn| bmm| xri| wpb| xug| ykg| cjp| uhp| wdl| cmn| obr| fdc| fjg| dzw| mln| tel| puk| uyu| cdq| zqk| ydi| clf| tin| lpz| sor| dqz| dok| kth|