Nowadays, the application of negative margin technology is more and more wide, any large site under glimpse will have its shadow. Personally think that the negative margin technology is a learning CSS on the road must be an indispensable topic, many advanced applications and difficult to repair can use negative margin technology to achieve.
Negative margin theory:
Before you explain what a negative margin is, you have to know what margin is a thing, if it is not clear that you can first read my previous article "Don't Tell me You know margin", advance to fill the knowledge, read this article, I believe both articles can bring you a lot of harvest.
For the sake of the image and understandable explanation of negative margin, we will introduce a reference line that is not in the world of the Consortium. What is a reference line? A guide is a datum point that margin moves, and this datum point is stationary relative to box (itself). The margin value is the amount of the box's displacement relative to the reference line.
A complete margin property is so written margin:top right bottom left; (eg:margin:10px 20px 30px 40px). There are two types of guides in the margin property, and the top and left guides belong to one class, and the right and bottom guides belong to another class. Top and left are outside elements for reference, and right and bottom are based on the element itself as a reference. The displacement direction of the margin is the case where the margin value is positive and the displacement is in the opposite direction if it is negative.
The above text and picture may be very difficult to understand, let's look at the actual code:
| The code is as follows | Copy Code |
| <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>margin Reference line Illustration </title> <style type= "Text/css" > *{margin:0; padding:0;} . wrap{width:400px border:5px solid #aaa;} . example{width:200px height:200px; background: #CCCCFF;} . normal{width:200px height:200px; background: #CCE8CF;} /* Add or comment out the following margin property to see the difference . example{margin:-10px 20px-30px 40px; */ </style> <body> <div class= "Wrap" > <div class= "Example" >example element: Margin guide for illustrative text, see the amount of displacement that this element moves as a result of margin changes. </div> <div class= "Normal" > an ordinary box</div> </div> </body> |
|
To parse this code, there is an adjacent element under the example element Normal (note: This is an analysis of the example element after adding and removing margin, the normal element serves only as a reference to the effect before and after the example element).
Based on the guideline above, margin:-10px (top) 20px (right) -30px (bottom) 40px (left); On the -10px and left 40px will be other elements for reference, the so-called outer element is the boundary element of this element (again vernacular point explanation is the element's immediate element, here involves containing block knowledge, can own on-line search). The boundary element above and to the left of the example element is the wrap parent element, The Wrap parent element is the datum point, and the margin-top of example is -10px, imagine what would happen if Margin-top was +10px here, yes, if +10px, The example element is based on the edge of the wrap parent element, then the example element produces the gap margin with the wrap parent element 10px, which, in turn, is margin-tip:-10px or is based on the edge of the wrap parent element, which in turn pushes up the 10px distance position. The margin-left of the example element is 40px, the 40px margin is separated according to normal logic, and if -40px is the same, then it is the opposite direction of the 40px distance to the left.
Then look at the Margin-right and margin-bottom of the example elements, and from the above we know that these two values are based on the element itself as a reference. What is called the element itself as a reference, the exact meaning refers to its own as a reference to influence the surrounding elements of the position (in essence, is to affect the bottom and right adjacent elements of the reference line). The margin-bottom here is -30px, and there is no change to its position, but it has a great effect on the normal element below it, because the upper boundary element of the normal element is the example element. According to the example element boundary to determine its own position, imagine if the example element Margin-bottom to +30px, then example elements will be separated from the normal element below, instead of -30px, The normal element below is due to example the inner concave of the reference line, causing the normal element to be "raised" by itself. This is the meaning that affects the position of the surrounding elements as a reference to itself.
Here to comb the law, when the margin four values are positive values, then margin in accordance with the normal logic of the surrounding elements generated margins. When the top and left of an element margin are negative, it causes the element to move up or down. When an element margin the bottom and right is negative, it affects the guides for the adjacent elements on the right-hand and the bottom. If you want to get a deeper understanding of the theory of guides, you can also visit the margin attribute of the article.
Negative margin Combat:
As far as I know, there is not a complete set of articles on the subject of negative margin. There is also only partial theory or partial examples, theory is ultimately the theory, the use of knowledge is fundamental, and have an example you have to know the principle, Teach the mermaid not to teach people to fish. Next we will use four examples to delve into the application areas of negative margin technology.
The negative margin is applied in the Tab tab:
Effect preview:
Front-End combat interaction Optimization
This is the content of the first tab, now, the application of negative margin technology is more and more widely, any large site glimpse will have its shadow. Personally think that the negative margin technology is a learning CSS on the road must be an indispensable topic, many advanced applications and difficult to repair can use negative margin technology to achieve.
Core Analysis:
As the above tab tab effect, the core is the next two lines highlighted the code, the second line of the margin-bottom:-1px; so that the bottom of the body part of the upward "lift" 1px distance, To achieve the mouse after the top Shift tab white cover the black border below the effect (note: Because IE is not compliant with the world's standard, so when the mouse moved to the tab, you need to add an additional attribute position:relative; To fix IE does not cover the bottom border of this bug). The purpose of the margin-left:-1px is to move the four tabs to the left 1px distance, to the effect that there is only one split line.
CSS code:
| code is as follows | copy code |
. demotab{width:400px; font:14px/1.5 Microsoft Yahei,verdana,helvetica,arial,sans-serif;} |
|
HTML code:
| The code is as follows | Copy Code |
| <div id= "Demotab" class= "Demotab" > |
|
Negative margin negative displacement technology application:
Effect preview:
Toygers kittens
Icon
Core Analysis:
above that similar to mall hot goods postmark effect is also implemented by the negative margin, the previous use of relative/absolute such a "dangerous" attribute to the relative "moderate" margin attribute. The core is that the small postmark picture uses the negative margin-top upward movement, achieves similar absolute the superposition effect.
| code is as follows | copy code |
| CSS code: . demospecitem{width:212px; min-height:178px; _height:178px;} HTML code: <div class= "Demospecitem" |
Core Analysis:
Scale-type navigation can be said to be one of the best occasions to use negative margin technology. As the above example, try to imagine not using negative margin, simple use of pictures to make such scale-type navigation, imagine the cut map, positioning, click the picture after the switch, the middle of the border part of the mask, maintenance of the workload of development, the light to think these will shudder. and using negative margin here only add a margin-left can achieve the effect of the front and back cover.
| The code is as follows | Copy Code |
| CSS code: . Demonav. demolist{float:left; width:154px; height:53px; margin:0 0 0-20px;} HTML code:
|
|
Using negative margin to make adaptive left and right layout:
Effect preview:
Toygers kittens
Negative margin can replace float floating layout, layout planning, and have the adaptive effect of float. You can try to see this example by clicking the zoom width and narrowing button. Nowadays, the application of negative margin technology is more and more wide, any large site under glimpse will have its shadow.
Click Zoom Width Click Narrow do not set minimum width
Core Analysis:
such as the above layout effect (a fixed picture on the left, the content on the right), negative margin can replace float floating layout, layout planning, and have a float does not have the adaptive effect. You can try to see this example by clicking the zoom width and narrowing button. You may also have found the third "do not set minimum width" button, what is this for? You can use the standard browser to view the above example, click the Wide button to the widest width, and then click Do not set the minimum width button, you will find a bug occurred. Negative margin as a layout effect does have its uniqueness, but there is also a small flaw in itself, that is, if the inner last child element is moved up with a negative margin, because the parent element is its margin element, its actual height will be smaller as the inner child element moves up. The solution is to set a minimum height, the minimum height is a small fixed element height (This example is the left fixed picture height), you can completely resolve the negative margin affect the parent element height bug.
| The code is as follows | Copy Code |
CSS code: . demolayout{width:500px border:1px solid #aaa; background: #EEEEEE;} HTML code: <div id= "Demolayout" class= "Demolayout" > |
|
Conclusion:
Based on the above examples, I believe you have a more complete understanding of the negative margin technology. The negative margin not only can make the general CSS attribute cannot achieve the effect also can transform the complex to simplify, the decay for the miraculous miracle, of course the negative margin use place not only these, but also has many effect all is needs the negative margin technology to realize, as long as you patiently to practice to explore, I'm sure you'll find more negative margin use the occasion.
Here is a netizen for margin supplement
What's margin?
The CSS margin property defines the space around the element. You can set the top, right, bottom, and left margins by using a separate property. You can also use the abbreviated outer margin property to change all the outer margins at the same time. --w3school
boundary, creating an extra blank area around the element. A "white space" usually refers to an area where other elements cannot appear and the parent element's background is visible. --CSS Authority Guide
I prefer to use the word "outer space" to explain margin (the same padding can be called "inner margin", but I just like to call padding "filler" or "leave White"), We can clearly understand that the most basic use of margin is to control the space around the elements, from the visual angle to achieve separate purposes.
Characteristics of margin
The margin is always transparent.
Margin you can set the top, right, bottom, and left margins by using a separate property. namely: Margin-top, Margin-right, Margin-bottom, Margin-left.
The Margin-width value types for the outer margin are: auto | Length | Percentage
You can also use the abbreviated outer margin property to change all the outer margins at the same time: margin:top right bottom left; (eg:margin:10px 20px 30px 40px) memory is the memory of the elements just above the clockwise "up and down".
And the specification also provides the omitted numerical notation, basically is as follows:
1, if margin has only one value, the upper right and lower left margin is the same value. For example: margin:10px; is equal to margin:10px 10px 10px 10px;
2. If the margin has only two values, the first value represents the top and bottom margin value, and the second value is the left and right margin value. For example: margin:10px 20px; is equal to margin:10px 20px 10px 20px;
3. If the margin has three values, the first value represents the margin value, the second value represents the left and right margin value, and the third value represents the lower margin value. For example: margin:10px 20px 30px; is equal to margin:10px 20px 30px 20px;
4, if the margin has four values, the four values corresponding to the upper right and lower left four margin values. Example: margin:10px 20px 30px 40px;
In practical applications, individuals do not recommend the use of three-value margin, one is easy to remember, the second is not easy to modify later, a start if written margin:10px 20px 30px; In the future, the requirement changes to 10px, right 30px, down 30px, left 20px, You have to still have to take this margin apart for margin:10px 30px 30px 20px; laborious and not flattering, as the first honest written margin:10px 20px 30px 20px; come true, Don't increase the cost of future development in order to save two bytes now.
Vertical margin Merge problem
Don't be intimidated by the noun above, simply put, the outer margin merge means that when two vertical margins meet, they form an outer margin. The height of the merged outer margin is equal to the larger of the two height of the outer margin where the merge occurred. You can view the W3shool CSS outside the merge to understand this basic knowledge.
In actual work, the problem of vertical outer-distance merging is common in the margin-top of the first child element, the spacing between the parent element and the parent element is opened, and only under standard browser (Firffox, Chrome, Opera, Sarfi), IE behaves well. Examples can look at the following code (ie "Normal", under the standard browser to see the "bug"):
| code is as follows | copy code |
| <title> vertical outer margin merge </title> <style> . top{width:160px height:50px; background: #ccf;} . middle{width:160px; background: #cfc;} . Middle. firstchild{margin-top:20px;} </style> <body> <div class= "Top" ></DIV> <div class= "Middle" <div class= "FirstChild" > I actually just want to distance myself from my parent element. </div> <div class= "Secondchild" ></DIV> </div> </body> |
|
If according to CSS specification, ie "good performance" is actually a wrong performance, because IE's haslayout rendering caused this "good performance" appearance. Other standard browsers show a "problematic" look. Well, it's easy to discuss this if you've read the W3shcool CSS outside of the merged article. This problem occurs because, according to the specification, a box without padding (padding-top) and a top border (border-top), the top margin of the box overlaps the top margin of the first child element in its internal document flow.
Besides, the white dot is: The top margin of the first child element of the parent element margin-top if a valid border or padding is not touched. will continue to find their own "leadership" (parent element, ancestor Element) trouble. As long as the leadership to set an effective border or padding can effectively control the head of the margin to prevent it from leapfrog, false transfer of Imperial decree, their margin as the leader of the margin implementation.
As explained above for a solution for vertical outer-space consolidation, adding a border-top or padding-top to the middle element in the parent element example solves this problem.
In general, this problem is explained here, most of the article will not go further down, but as a practical developer, the most seek is to know its reason, originally used Margin-top is to separate distance from the parent element, and according to you such a solution, in fact, is a kind of "repair", in order to "make up for repair" This parent-child vertical margin merges this CSS specification "Bug", while forcing the use of border-top and padding-top on the parent element, uncomfortable, and not easy to remember, the next time this happens, you will forget this rule, And in the page design if you do not need to border-top add a top border, so a plus instead of the superfluous, for later changes leave hidden dangers.
Why do you have to use Border-top,padding-top to write such a line of code for such a so-called standard specification? You can refer to another article with margin or use padding to find the answer.
With a margin or a padding?
When margin should be used:
You need to add white space to the outer side of the border.
When no background (color) is required in the blank space.
The gap between the two boxes connected up and down needs to be offset each other. such as 15px + 20px of margin, will get 20px blank.
When should be used padding:
Need to add white space when border.
When you need a background (color) in a blank space.
The blank between the two boxes connected up and down, the hope equals the sum of the two. such as 15px + 20px of padding, will get 35px blank.
Personally think: margin is used to separate elements from the spacing between elements, padding is used to separate elements from the content of the interval. Margin is used to layout separate elements so that elements are irrelevant to elements; padding is used for the interval between elements and content, and there is a "breathing distance" between the content (text) and the (wrapped) elements.
Here I intercepted part of another article content, please see the details of the margin or with the padding
The difference of margin in block elements and inline elements
HTML (this is the HTML standard, not XHTML) is divided into two basic elements, block and inline. As the name suggests, the block element is the element that is represented by "blocks" (block-like elements), and the inline element is the element that behaves as a "row" (character level elements and text strings). The main difference between the two is that the block element starts on a separate line in the page document, and one row is exclusive. The inline element coexists with other inline elements.
Block elements (blocks) are roughly: p| h1| h2| h3| h4| h5| h6| ul| ol| pre| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | fieldset | Address (as the HTML5 standard progresses, some elements will be abolished, and some new elements will be introduced) note that not all of the block elements default display properties are block, such as table display: The element of the table is also the block element.
Inline elements (inline elements) are roughly: #PCDATA (that is, text) | TT | I | B | Big | small| EM | Strong | DFN | CODE | Samp | KBD | VAR | CITE | ABBR | acronym| A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | bdo| INPUT | SELECT | TEXTAREA | LABEL | BUTTON
There are special types of elements: such as Img|input|select|textarea|button|label, which are called replaceable elements (replaced element). They distinguish between general inline elements (relatively, called non-replaced Element) are: These elements have intrinsic dimensions (intrinsic dimensions), and they can set width/height properties. Their nature is consistent with the elements that set the Display:inline-block.
Maybe a friend has a little bit of doubt about the non-replaced element, a little help to understand. Non-permutation elements, there is no explicit definition in the consortium, but we can literally understand that the replaced element corresponds to the permutation element, which means that we understand the meaning of the permutation element and we know the non permutation element. The permutation element, which is defined in the consortium:
"An element of this is outside the scope of the CSS formatter, such as a image, embedded document, or applet"
From the definition we can understand that the permutation element (replaced element) mainly refers to IMG, input, textarea, select, object and so on, such as the default CSS format of the outer range of the elements. Furthermore, non-permutation elements (non-replaced element) are elements other than the permutation elements of IMG, input, textarea, select, object, and so on.
Margin in block-level elements, his performance can be fully reflected, up and down left and right you set. And remember that the margin reference datum of a block-level element is a margin distance from the previous element, that is, the element before itself. If the element is the first element, it is the margin distance relative to the parent element (but the first element is margin-top relative to the parent element and the parent element does not have a padding-top/border-top) to verify the knowledge of the vertical margin merging above.
Margin can also be used for inline elements, which are allowed by the specification, but Margin-top and margin-bottom have no effect on the height of the inline element (row), and because the boundary effect (margin effect) is transparent, he has no visual impact.
This is because the boundaries apply to inline elements without changing the line height of the elements, and if you want to change the inline element's row heights, which is similar to the line spacing of the text, then you can only use these three attributes: Line-height,fong-size,vertical-align. Keep in mind that this affects the height of the inline element is line-height rather than height, because the inline element is a row, set a height, then this is the entire segment of the inline element high? Or is it the height of the inline element line? This is not to say, so the unification of each row to set a high, can only be line-height.
Margin-top/margin-bottom has little practical effect on inline elements, but margin-left/margin-right can also affect the inline elements. Application margin:10px 20px 30px 40px; the left side of this CSS if written on the inline element, his effect is roughly, up and down, left his adjacent elements or text distance of 40px, right away from his adjacent elements or text distance of 20px. You can try it on your own.
Finally, in the inline element we mentioned the non replaceable inline element (non-replaced element), which is Img|input|select|textarea|button|label, although it is an inline element, But margin still can affect him up and down about!
Summarize the margin attribute can be applied to almost all elements except the elements of the table display type (excluding table-caption, table and inline-table), and the vertical outer margin to the non-permutation inline element (non-replaced inline Element) does not work.
Negative margin technology and its application
In all practical applications of margin, negative margin technology is one of the most important lessons in my Learning CSS, and many advanced applications and difficult diseases on the page can be realized with negative margin technology. Margin technology is so useful, limited to space I do not want to rush, so I decided to write a special article for him, detailed description of his effect, principle, and its application. Before this, you can read the Yiwen margin properties of the article, roughly understand the "margin guide" concept, and then look at the negative margin technology and its application this article.
Common browsers for bugs that appear under margin
A wide range of written so many, and finally summed up some of the common browser margin bug bar, the next encounter margin layout problems can be seen here to find solutions, if you also found other margin in the browser under the bug you can leave a message, check the acceptance I will be added in time, Thank you for sharing:
IE6 in the double margin bug:
Occurrence: Margin double when setting the Margin-left (element Float:left) or margin-right (element Float:right) for the first floating element within the parent element.
Solution: To add display:inline to the floating element; CSS properties, or replace Margin-left with Padding-left.
Principle Analysis: Block-level object default Display property value is blocks, when set the float, but also set its outer margin will appear this situation. You may ask: "Why is there no double margin bug between the object and the first object?" Because floats have their corresponding objects, only floating objects relative to their parent object can have such a problem. The first object is relative to the parent object, and then the object is relative to the first object, so there is no problem after the object is set. Why Display:inline can solve this bilateral distance bug, first of all inline element or inline-block element is not a bilateral distance problem. Then, Float:left and other floating properties can make the inline element haslayout, will let the inline element behaves like the inline-block element characteristic, supports the high width, the vertical margin and the padding and so on, so Div All the styles of class can be used on this display inline element.
Floating element 3px interval bug in IE6:
Occurrence: Occurs when an element floats, and then a floating element naturally floats close to the 3px bug that will appear.
Workaround: The right elements also float together, or add IE6 Hack _margin-left:-3px to the right element to eliminate 3px spacing.
Principle Analysis: IE6 browser flaw bug.
Ie6/7 negative margin Hide bugs:
Occurrence: When a negative margin is set to a haslayout element within a haslayout parent element, the parent element part is not visible.
Workaround: Remove the haslayout of the parent element, or assign haslayout to the child element, and add position:relative;
Principle Analysis: Ie6/7 's unique haslayout produces problems.
Ie6/7 under Ul/ol tag vanishing bug:
Occurrence: When Ul/ol triggers haslayout and writes Margin-left on Ul/ol, the previous default ul/ol tag disappears.
Workaround: Set margin-left for Li instead of setting Margin-left for Ul/ol.
Principle Analysis: Ie6/7 browser bug
Ie6/7 margin and absolute elements overlap bugs:
Occurrence: Two-column adaptive layout, the left element absolute absolute positioning, the right side of the margin open distance positioning. The block-level element with the absolute attribute applied to the left of the IE6/7 overlaps the adaptive text content on the right.
Workaround: Change the left block level element to an inline element, such as replacing the div with span.
Principle Analysis: This is because the Ie6/ie7 browser inline horizontal tag elements and block level of the label elements are not differentiated equally rendered. belongs to the Ie6/7 browser to render bugs.
IE6/7/8 under Auto Margin center BUG:
Occasion: Set the block element to margin Auto cannot center
Workaround: This bug is usually caused by no doctype, and then the quirks mode of IE is triggered, plus the DOCTYPE declaration is OK. In the "Beat IE Sunflower book" in the method given is to add a width to the block element can be resolved, but according to my parents, plus with this method is invalid, if no doctype even to add width to the element can not make the Block element center.
Principle analysis: Lack of DOCTYPE declaration.
IE8 under Input[button | submit] Setting Margin:auto cannot be centered
Occurrence: Under IE8, if you give a label such as a button (such as button input[type= "button"] input[type= "submit"), set {display:block; margin:0 auto;} If you do not set the width, you cannot center.
Solution: You can add width to input
Principle Analysis: IE8 browser bug.
IE8 percent padding vertical margin bug:
Occurrence: When the parent element sets a percentage of padding, the child element has a vertical margin, as if the parent element was set margin.
Workaround: Add a Overflow:hidden/auto to the parent element.
Principle Analysis: IE8 browser bug.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
