Negative margin function introduction and usage summary

Negative margin function introduction and usage summary
As early as in the CSS2 recommendations in 1998, tables gradually faded out of the stage and were gradually recorded in history. Because of this, CSS layout has become synonymous with elegant coding.
Of all the CSS concepts that designers have used, negative margins are probably the least talked about positioning method. It’s like a taboo that everyone uses but no one discusses.
1. "Rehabilitate" negative margin
 We all use margins in CSS, but setting margins to negative numbers can be tricky. In web design, people’s attitude towards the use of negative margins varies greatly, some love it, while others think it’s the devil’s work.
A negative margin would be set like this:

Copy code
The code is as follows:

#content {margin-left:-100px;}

Negative margins are rarely used but you’ll soon learn that they can do a lot. Here are a few things to note about negative margins:
A. Negative margin is absolutely standard CSS
This is not a joke. W3C even noted that negative values ​​are allowed for margin attributes. This is what Nuff said
B. It is absolutely true that negative maring is not a hack method. You cannot think that it is a hack method just because you lack understanding of negative maring or because it looks like a hack. Unless you are using it to fix a mistake you made elsewhere.
C. If you do not break away from the document flow and do not use float, the negative margin element will not disrupt the document flow of the page. So if you use negative margin to move an element up, all following elements will be moved up as well.
D. Fully compatible All modern browsers fully support negative margins (IE6 also supports it in most cases).
E. Floating affects the use of negative margin. Negative margin is not a CSS property you use every day, so you should be careful when applying it.
F. Dreamweaver does not interpret negative margins
DW's design view does not interpret negative margins. But the question is why would you want to check your website in Design view?
2. Use negative margins
 Negative margins are very powerful properties if used properly. Here are two scenarios where negative margins take precedence.
Negative margin property on static elements

deodesign


Static elements are elements that are not set to float. The following figure illustrates the effect of negative margin on static elements. When the margin-top/margin-left of a static element is assigned a negative value, the element will be pulled in the specified direction. For example:

Copy code
The code is as follows:

/* Move the element up 10px*/
#mydiv1 {margin-top:-10px;}

But if you set margin-bottom/right to a negative number, the element will not move down/right as you expect, but the subsequent elements will be dragged in and cover the original elements.

Copy code
The code is as follows:

/*
* #mydiv1's subsequent elements move up 10px, #mydiv1 itself does not move
*/
#mydiv1 {margin-bottom:-10px;}

If the width attribute is not set, setting a negative margin-left/right will drag the element in the corresponding direction and increase the width. At this time, the margin acts like padding.
3. Negative margin on floating elements
Consider the following situation
HTML

Copy code
The code is as follows:

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

If you give a floated element a negative margin in the opposite direction, it will make the line spacing zero and the content overlap. This is a very useful way to create adaptive layouts where one column is 100% width and the other columns are fixed widths (e.g. 100px).

Copy code
The code is as follows:

/* Negative margin applied in the opposite direction of float */
#mydiv1 {float:left; margin-right:-100px;}

If both elements are floated, and the #mydiv1 element sets margin-right to 20px. This way #mydiv2 will think that #mydiv1 is 20px shorter than its original width (thus causing it to overlap). But what’s interesting is that the content of #mydiv1 is not affected and keeps its original width.
If the negative margin is equal to the actual width, the element will be completely covered. This is because the full width of the element is equal to the sum of margin, padding, border, and width, so if the negative margin is equal to the sum of the remaining three, the actual width of the element becomes 0px.
4. Practical skills
 Since we know that using negative margins is CSS2-compliant code, we can create some interesting CSS techniques using this feature.
Make a single <ul> with 3 columns

deodesign


If you have a list of items that is too long to display vertically, why not try breaking it into columns instead? Negative margins allow you to achieve this effect without adding any floats or tags. As shown below, it is amazing how such a simple operation can divide the collection into three columns!
HTML

Copy code
The code is as follows:

<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham</li>
<li class="col2 top">Bread</li>
<li class="col2">Butter</li>
<li class="col3 top">Flour</li>
<li class="col3">Cream</li>
</ul>

CSS

Copy code
The code is as follows:

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

By setting margin-top:-2.6em (twice the line height of the <li> tag) in the top class, all elements are perfectly aligned. Instead of setting the relative position of each <li>, you only need to apply a negative margin to the first tag in each column, which will make it fit much better. Cool, right?
Using Overlap to Create Emphasis

deodesign


Intentionally overlapping elements is also a great design trope to create an illusion of depth and highlight specific elements. A good example of this is the review section on Phlashers.com, which uses the overlay technique to highlight the number of reviews. With negative margins, the z-index property, and a little creativity, you can do it, too.
Excellent 3D text effects

deodesign


Here’s a clever way to create something similar to the Safari font: create 2 identical, slightly tilted text using 2 colors, then use negative margins to overlay one text onto the other, leaving a 1-2 pixel difference. Now you have optional, robot-friendly text! No more bulky, bandwidth-consuming jpegs and gifs.
Simple 2-column layout Negative margin is also a good way to create a simple 2-column adaptive layout. A 2-column responsive layout is a layout that has a content column with a 100% liquid width and a fixed width sidebar.
HTML

Copy code
The code is as follows:

<div id="content"> <p>Main content here</p> </div>
<div id="sidebar"> <p>I'm the Sidebar! </p> </div>

CSS

Copy code
The code is as follows:

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

Now you have a simple two-column layout that works flawlessly even in IE6. Now, to prevent #sidebar from being covered by the text in #content, add

Copy code
The code is as follows:

/* Prevent text from overlapping */
#content p {margin-right:210px;}
/* It is 200px + 10px, 10px is their spacing*/

If used properly, negative margin can completely replace the table tag to form a flexible document structure. This structure is an accessibility SEO technique that allows you to arrange your tags in almost any order you wish.
Fine-tune element position <br />This is the most commonly used and simplest method of negative margin. If you insert a tenth div between nine divs, sometimes they may not align for some reason. Using negative margins allows you to fine-tune only the tenth one without having to modify the other nine elements.
5. Bug fixes <br />Problems with text and links When floating elements use negative margins, problems may occur in some older browsers. The symptoms include:
The link is not clickable;
Text is difficult to select;
After losing focus, any link in the tab will disappear;
Solution: Add position:relative to the element and it will work properly!
Images are truncated If you are unfortunate enough to use IE6 in the office, you may sometimes find that the content of overlapping and floating elements is suddenly truncated.
Solution: Similarly, add position:relative to the floating element and everything will return to normal.
6. Summary
 Negative margins have found their place in modern web design due to their ability to position elements without adding extra markup. As more users upgrade their browsers (including IE8), the future of this technology looks very bright and more websites will rely on it.
If you have any unique experience with negative margin, please leave a message to tell me.

1. Application of negative margin in Tab
2. Application of negative margin and negative displacement technology:
3. Use negative margin to create adaptive left-right layout: For this type of layout effect (a fixed image on the left and content on the right), negative margin can replace float layout, perform left-right layout planning, and have an adaptive effect that float does not have. You can try clicking the Wider and Narrow buttons to see an example of this. You may have also noticed the third "Do not set minimum width" button. What is this for? You can use a standard browser to view the example above, click the width button to the maximum width, and then click the Do not set minimum width button, you will find that a bug has appeared. Negative margin is indeed unique in layout effects, but it also has a small flaw. That is, if the last child element inside is moved up using negative margin, since the parent element is its margin element, its actual height will also become smaller due to the upward movement of the internal child element. The solution is to set a minimum height. The minimum height value is the smaller fixed element height (in this case, the height of the fixed image on the left). This can completely solve the bug that the negative margin moves up and affects the parent element height.
4. Implement the image and use negative margin to vertically center the block element. Summary: Negative margin values ​​will not affect the actual size of the box. If it is a negative top or left value, it will cause the box to move upward or left. If it is bottom or right, it will only affect the reference line displayed by the box below.

<<:  mysql calculation function details

>>:  Linux command line operation Baidu cloud upload and download files

Recommend

MySQL Advanced Learning Notes (Part 3): Introduction to MySQL Logical Architecture, Detailed Explanation of MySQL Storage Engine

Introduction to MySQL logical architecture Overvi...

CSS margin overlap and how to prevent it

The vertically adjacent edges of two or more bloc...

js to implement web calculator

How to make a simple web calculator using HTML, C...

javascript countdown prompt box

This article example shares the specific code of ...

Meta tags in simple terms

The META tag, commonly referred to as the tag, is...

Detailed explanation of count without filter conditions in MySQL

count(*) accomplish 1. MyISAM: Stores the total n...

Example code for implementing page floating box based on JS

When the scroll bar is pulled down, the floating ...

MySQL not null constraint case explanation

Table of contents Set a not null constraint when ...

How to allow external network access to mysql and modify mysql account password

The root account of mysql, I usually use localhos...

Our thoughts on the UI engineer career

I have been depressed for a long time, why? Some t...

Should I abandon JQuery?

Table of contents Preface What to use if not jQue...

Detailed explanation of Vue custom instructions

Table of contents Vue custom directive Custom dir...

How to display small icons in the browser title bar of HTML webpage

Just like this effect, the method is also very si...

JavaScript manual implementation of instanceof method

1. Usage of instanceof instanceof operator is use...

Ubuntu E: Unable to obtain lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarily unavailable)

Ubuntu 18.04, other versions of Ubuntu question: ...