In CSS, margin can be positive or negative. When margin is negative, the effects on normal document flow elements are different from those on floating elements.

negativemarginTwo cases of

  1. When the elementmargin-topormargin-leftWhen negative, the current element is pulled in the specified direction.
  2. When the elementmargin-bottomormargin-rightWhen negative, the “subsequent element” is pulled in the specified direction.

Let’s look at the following example:

<style>
  .container div {
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
  }
  .first { background-color: red; }
  .second { background-color: purple; }
  .third { background-color: blue; }
</style>
<div class="container">
  <div class="first">1</div>
  <div class="second">2</div>
  <div class="third">3</div>
</div>
Copy the code

margin-topandmargin-leftFor example,

When margin-top or margin-left of an element is negative, the current element is pulled in the specified direction.

Second {margin-top: -30px; margin-top: -30px; }, the effect is as follows:


If it’s margin-left, set the second div to. Second {margin-left: -30px; }, the effect is as follows:


margin-bottomandmargin-rightFor example,

When an element’s margin-bottom or margin-right is negative, the “subsequent element” is pulled in the specified direction.

Second {margin-bottom: -30px; margin-bottom: -30px; }, the effect is as follows:



margin-right

Using the scenario

Now that we know the rules of negative margins, let’s talk about the specific situations in which they are used. Some common techniques are:

  1. Align the picture with the text
  2. Adaptive two-column layout
  3. The element is vertically centered
  4. TAB TAB

Align the picture with the text

When images are lined up with text, they tend to misalign horizontally at the bottom. Such as:

<img src="./icon.png" alt="icon"This is an iconCopy the code

This is because images and text are aligned to the baseline by default (vertical-align:baseline; .

If you want to align the image horizontally with the bottom of the text, use vertical-align:text-bottom; Margin-bottom: -3px; margin-bottom: -3px; , the effect is as follows:

This 3px is exactly the distance from baseline to bottom in the text.

Adaptive two-column layout

An adaptive two-column layout usually refers to a layout in which the width of one column is fixed and the width of the other column is adaptive. This layout is best achieved using negative margin techniques.

<style>
  div {
    float: left;
    color: #fff;
    height: 500px;
  }
  .siderBar {
    width: 200px;
    background-color: purple;
  }
  .content {
    width: 100%;
    margin-right: -200px;
    background-color: plum;
  }
</style>
<body>
    <div class="siderBar"> sidebar, fixed width 200px</div> <div class="content"</div> </body>Copy the code

By changing the width of the browser, you can see that the content area on the right ADAPTS automatically to the browser.

The element is vertically centered

With negative margin+position:absolute, block elements, inline elements, and inline-block elements can be centered vertically.

.father { position: relative; // Control the child within the parent element width: 500px; height: 500px; background-color: cornflowerblue; } .son { position: absolute; top: 50%; left: 50%; margin-top: -100px; Margin-left: -50px; margin-left: -50px; margin-left: -50px; // Element width: 100px; height: 200px; background-color: white; }Copy the code

The principle is: absolute positioning top: 50%; left:50%; Just position the point in the upper left corner of the son element, while margin-top and margin-left pull themselves back to half width and height, turning their center point into the center.

TAB TAB

Negative margin technology can be used to style tabs. The following code:

<style>
  ul, li {
    list-style: none;
  }
  .tab {
    width: 400px;
  }
  .tabHd {
    margin-bottom: -1px;
    padding: 0 10px 0 0;
    border: 1px solid #6c92ad;
    border-bottom: none;
    background: #eaf0fd;
    height: 28px;
  }
  .tabList {
    float: left;
    margin-left: -1px;
    padding: 0 15px;
    line-height: 28px;
    border-left: 1px solid #6c92ad;
    border-right: 1px solid #6c92ad;
    color: # 005590;
    text-align: center;
  }
  .tabList.current {
    position: relative;
    background: #fff;
  }
  .tabBd {
    border: 1px solid #6c92ad;
  }
  .tabBd .roundBox {
    padding: 15px;
  }
  .tabContent {
    display: none;
  }
  .tabContent.current {
    display: block;
  }
</style>
Copy the code
<div id="tab" class="tab">
  <ul class="tabHd">
    <li class="tabList current">tab 1</li>
    <li class="tabList">tab 2</li>
    <li class="tabList">tab 3</li>
    <li class="tabList">tab 4</li>
  </ul>
  <div class="tabBd">
    <div class="roundBox">
      <div class="tabContent current"> Option content 1</div> <div class="tabContent"> option content 2</div> <div class="tabContent"> option content 3</div> <div class="tabContent"</div> </div> </div>Copy the code

The effect is as follows:

The code uses two negative margins, one for tabList, to overlap each TAB’s border by “pulling” to the right. The other is for tabHd, by “pulling” up and setting the background color of the current option to white, the content of the option is covered by the lower border of the current option, while the rest of the TAB items are not covered because the background color is not set to transparent by default.