” タグを作成し、その「」を設定します 色 ”を黒に：

<中央 >
= '../book.jpg' 身長 = 「50％」 ; 幅 = 「50％」 >

= 「背景色: ドジャーブルー」 >

= 「色：黒」 > Linuxhint へようこそ >
>
>

上記のコードをコンパイルすると、出力は次のようになります。

---

---

”

」タグは、負のマージンを適用する前に Web ページの下部にあります。

負のマージン上部プロパティの使用

追加 ' マージントップ 「」プロパティを「」に

” 要素を使用し、その値を負の値で指定します。たとえば、ここで -15% は margin-top プロパティの値です。

<中央 >
= '../book.jpg' 身長 = 「50％」 ; 幅 = 「50％」 >

= 「背景色:ドジャーブルー」 >

= 「色: 黒; マージン上部: -15%;」 > Linuxhint へようこそ >
>
>

コードを実行すると、Web ページは次のようになります。

出力には、負の margin-top により「

」要素が親要素の前に表示されることが表示されます。

負のマージン下プロパティの使用

上記と同じプロパティを適用し、「」を変更するだけです。 マージン-ボトム ' 財産。その後、「

」要素の下部に画像を追加して、視覚的な変化を確認します。

< ディビジョン スタイル = 「背景色:ドジャーブルー」 >
< h3 スタイル = '色: 黒; マージン-ボトム: -5%;' > Linuxhint へようこそ h3 >
ディビジョン >
< 画像 送信元 = '../book.jpg' 身長 = 「50％」 ; 幅 = 「50％」 >

コードを更新すると、Web ページは次のようになります。

上記の出力は、テキストの下マージンが -5% になっていることを示しています。

負のマージン権プロパティの使用

要素に margin-right プロパティの -55% の値を与えると、逆方向に移動します。

< ディビジョン スタイル = '背景色:ドジャーブルー;' >
< h3 スタイル = '色: 黒; 左マージン: -55%; ' > Linuxhint へようこそ < / h3 >
< / ディビジョン >
< 画像 送信元 = '../book.jpg' 身長 = 「50％」 ; 幅 = 「50％」 >

コードを実行すると、出力は次のようになります。

出力は、テキストが負のマージンを右に取得していることを示しています。

負のマージン左プロパティの使用

負の値を持つ margin-left プロパティも同様に機能します。以下のコードでは、「

」要素が margin-left プロパティとは逆方向に左側に 50% 移動します。

= '背景色:ドジャーブルー;' >

= '色: 黒; マージン左: -50%;' > Linuxhint へようこそ >
>
= '../book.jpg' 身長 = 「50％」 ; 幅 = 「50％」 >

上記のコードの出力は次のとおりです。

これが CSS における負のマージンの仕組みです。

なぜ margin-top:-5 != margin-bottom:5 なのでしょうか?

「」のとき マージン-ボトム:5% ”を使用すると、要素の下側から中心に向かってマージンが追加されますが、” マージントップ:-5% 」を使用すると、上から逆方向（ページの外側）に 5% のマージンが追加されます。

結論

CSS では、マージン値を割り当てることにより、負のマージンが逆方向に機能します。要素のコンテンツをページの外方向/外側に移動します。どちらのプロパティ値も親の位置に対応してコンテンツを反対方向に移動するため、「margin-top:-5」は「margin-bottom:5」と等しくありません。この記事では、マイナスのマージンがどのように機能するかをうまく説明しました。