Margin_html/css_WEB-ITnose-HTML Tutorial-php.cn

What is Margin

The CSS margin property defines the space around an element. Top, right, bottom, and left margins can be set using separate properties. You can also use the shorthand margin property to change all margins at once. ??W3School

border, generates extra white space around the element. "White space" usually refers to the area where other elements cannot appear and the background of the parent element is visible. ??The Definitive Guide to CSS

I prefer to use the word "outer margin" to explain margin (in the same way, padding can be called "inner margin", but I just like to call padding "padding" or "Blank space"), we can clearly understand that the most basic use of margin is to control the spacing of space around elements to achieve mutual separation from a visual perspective.

Margin features

margin is always transparent.

margin can set the top, right, bottom, and left margins by using separate attributes. That is: margin-top, margin-right, margin-bottom, margin-left.

The value types of margin-width of margin are: auto | length | percentage

You can also use the abbreviated margin attribute to change all margins at the same time: margin: top right bottom left; (eg: margin:10px 20px 30px 40px) The memory method is "top, right, bottom, left" clockwise from right above the element.

And the specification also provides omitted numerical writing methods, which are basically as follows:

1. If margin has only one value, it means that the margins on the top, right, bottom and left have the same value. For example: margin:10px; is equal to margin:10px 10px 10px 10px;

2. If margin has only two values, the first value represents the upper and lower margin values, and the second value is the left and right margin values. For example: margin:10px 20px; is equivalent to margin:10px 20px 10px 20px;

3. If margin has three values, the first value represents the upper margin value, and the second value represents The value of the left and right margins, and the third value represents the value of the lower margin. For example: margin:10px 20px 30px; is equivalent to margin:10px 20px 30px 20px;

4. If margin has four values, then these four values correspond to the four margin values of top, right, bottom and left respectively. For example: margin: 10px 20px 30px 40px;

In practical applications, I personally do not recommend using three values of margin. First, it is easy to remember wrongly. Second, it is not easy to modify in the future. If you write margin: 10px at the beginning, 20px 30px; in the future, the requirements will be changed to 10px at the top, 30px at the right, 30px at the bottom, and 20px at the left. You have to split this margin into margin: 10px 30px 30px 20px; it is laborious and thankless, so it is better to do it honestly from the beginning. Write it as margin: 10px 20px 30px 20px; it’s real. Don’t increase the cost of redevelopment in the future just to save two bytes now.

Vertical margin merging problem

Don’t be intimidated by the above term. Simply put, margin merging means that when two vertical margins When they meet, they form a margin. The height of the merged margin is equal to the greater of the heights of the two merged margins. You can check out W3Shool CSS Margin Merging to learn the basics of this.

In actual work, the problem of vertical margin merging is common when the margin-top of the first child element will push up the distance between the parent element and the adjacent elements of the parent element, and it only works under standard browsers (FirfFox, Chrome, Opera, Sarfi) causes problems, but performs well under IE. For an example, you can view the following code (the performance is "normal" under IE, but "bug" appears when viewing under standard browsers):

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>垂直外边距合并</title><style>.top{width:160px; height:50px; background:#ccf;}.middle{width:160px; background:#cfc;}.middle .firstChild{margin-top:20px;}</style></head><body><div class="top"></div><div class="middle">  <div class="firstChild">我其实只是想和我的父元素隔开点距离。</div>  <div class="secondChild"></div></div></body></html>

Copy after login

If you follow the CSS specification, IE's "good performance" is actually a wrong performance , because IE's hasLayout rendering results in this "well behaved" appearance. Other standard browsers will exhibit a "buggy" appearance. Well, if you have read the above article on W3Shcool’s CSS margin merging, it will be easy to discuss this issue. The reason for this problem is According to the specification, if a box does not have padding-top and border-top, then the top margin of the box will be the same as the first child in its internal document flow. The top margin of the element overlaps .

The white point is: if the top margin-top of the first child element of the parent element cannot encounter a valid border or padding, it will continue to find its own "leader" layer by layer ( parent element, ancestor element) trouble. As long as you set a valid border or padding for the leader, you can effectively control this margin without a leader to prevent it from jumping over the hierarchy, pretending to be an imperial edict, and executing your own margin as the leader's margin.
The solution to vertical margin merging has been explained above. Adding a border-top or padding-top to the middle element in the parent element example can solve this problem.

Generally speaking, most articles will not go into more depth when this issue is explained here. However, as a practical developer, what I want most is to know what is happening and why. The original purpose of using margin-top is to work with The parent elements are separated by a distance, and according to your solution, it is actually a "fix". In order to "make up for and fix" the CSS specification "Bug" of merging parent-child vertical margins, you force the use of border-top and border-top on the parent element. padding-top is uncomfortable and not easy to remember. I will forget this guideline next time something like this happens. Moreover, if there is no need to add a border-top border to the page design draft, adding it will be superfluous. Leaving hidden dangers for future modifications.

Why do you have to use border-top and padding-top to write such an extra line of code for such a so-called standard specification? You can find the answer by referring to another article on whether to use Margin or Padding.

Should I use Margin or Padding

When should margin be used:
When you need to add whitespace outside the border.
When the blank space does not require a background (color).
The space between two boxes connected up and down needs to offset each other. For example, a margin of 15px and 20px will result in a 20px margin.

When to use padding:
When you need to add whitespace to the border during internal testing.
When the blank space requires a background (color).
The space between two boxes connected up and down is expected to be equal to the sum of the two. For example, a 15px 20px padding will result in a 35px blank space.

Personally think: Margin is used to separate elements from each other; padding is used to separate elements from content. Margin is used for layout to separate elements so that elements are independent of each other; padding is used for the space between elements and content to allow a "breathing distance" between content (text) and (wrapped) elements.

Here I have intercepted part of the content of another article. For details, please see whether to use Margin or Padding

The difference between margin in block elements and inline elements

HTML (here we are talking about the html standard, not xhtml) is divided into two basic elements, namely block and inline. As the name suggests, block elements are elements represented by "blocks" (block-like elements), and inline elements are elements represented by "lines" (character level elements and text strings). The main difference in performance between the two is that in the page document, the block element starts on a new line and occupies its own line. Inline elements are placed on the same line as other inline elements.

Block elements (block elements) are roughly: P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS (With the advancement of html5 standards, some elements will be abolished, and some new elements will be introduced) Note that not all block elements have a default display attribute of block, such as table elements with display:table It is also a block element.

Inline elements (inline elements) are roughly: #PCDATA (i.e. 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 elements: such as img| input|select|textarea|button|label, etc., they are called replaceable elements (Replaced elements). What distinguishes them from general inline elements (relatively speaking, non-replaced elements) is that these elements have intrinsic dimensions (intrinsic dimensions), and they can set the width/height attributes. Their properties are the same as elements with display:inline-block set.

Maybe some friends are a little confused about non-replaced elements (non-replaced elements). I would like to help you understand a little bit. Non-replacement elements are not clearly defined in W3C, but we can understand from the literal meaning that non-replacement elements correspond to replaced elements (replaced elements). That is to say, if we understand the meaning of replaced elements, we will understand non-replacement elements. element. Replacement elements are defined in the W3C:

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

From the definition we It can be understood that replaced elements mainly refer to elements such as img, input, textarea, select, object, etc. that have CSS formatted appearance range by default. Furthermore, it can be seen that non-replaced elements are elements other than replaced elements such as img, input, textarea, select, object, etc.

Margin is under block-level elements, and its performance can be fully reflected. You can set it up, down, left, or right. And remember that the reference base of the margin of the block-level element is the previous element, that is, the margin distance relative to the element before itself. If the element is the first element, it is the margin distance relative to the parent element (but if the first element is relative to the margin-top of the parent element and the parent element does not set padding-top/border-top, you need to verify the above Knowledge of vertical margin merging)

margin can also be used for inline elements, which is allowed by the specification, but margin-top and margin-bottom have no effect on the height of inline elements (on lines), And because the border effect (margin effect) is transparent, it has no visual impact.

This is because borders do not change the line height of the element when applied to inline elements. If you want to change the line height of an inline element, which is similar to the line spacing of text, then you can only use these three attributes: line-height , fong-size, vertical-align. Please remember that it is line-height, not height, that affects the height of inline elements, because inline elements are arranged line by line. If you set a height, is this the height of the entire inline element? Or is the inline element one row high? This is impossible to say, so we all set a height for each line, which can only be line-height.

margin-top/margin-bottom does not have much practical effect on inline elements, but margin-left/margin-right can still have an impact on inline elements. Apply margin: 10px 20px 30px 40px;, if the css on the left is written on an inline element, its effect is roughly that there is no effect up and down, the distance from the adjacent element or text on the left is 40px, and the distance from the adjacent element or text on the right is 20px. You can try it yourself.

In summary, the margin attribute can be applied to almost all elements, except elements of table display type (excluding table-caption, table and inline-table), and vertical margins are applied to non-displaced inline Element (non-replaced inline element) does not work.

Negative margin technology and its application

Among all the practical applications of margin, negative margin technology is one of the most important lessons on my way to learn CSS. Many advanced applications and page intricacies can be achieved using negative margin technology. Margin technology is so useful, but due to space limitations, I didn’t want to rush through it, so I decided to write an article specifically for it, explaining its effects, principles, and applications in detail. Before that, you can first read this article written by Yi Fei, which talks about the margin attribute from the simplest to the deeper, to have a general understanding of the concept of "margin reference line", and then check out this article about negative margin technology and its applications.

Common margin bugs in browsers

I have written so much. Finally, I will summarize some common margin bugs in browsers. When encountering margin in the future, You can check here to find a solution to the layout problem. If you find other bugs about margin under the browser, you can leave a message. I will add it in time after checking and adopting it. Thank you for sharing:

Double margin bug in IE6:
Occurrence: When margin-left (element float:left) or margin-right (element float:right) is set to the first floating element in the parent element, the margin is doubled.
The solution is to add the display:inline; CSS attribute to the floating element; or use padding-left instead of margin-left.
Principle analysis: The default display attribute value of block-level objects is block. This situation will occur when floating is set and its margins are also set. Maybe you will ask: "Why is there no double margin bug between subsequent objects and the first object?" Because floats have their corresponding objects, this problem only occurs with floating objects relative to their parent objects. The first object is relative to the parent object, and subsequent objects are relative to the first object, so there will be no problems after setting the subsequent objects. Why display:inline can solve this double margin bug? First of all, there is no double margin problem in inline elements or inline-block elements. Then, floating attributes such as float:left can make the inline element haslayout, making the inline element behave the same as the inline-block element, supporting height and width, vertical margin and padding, etc., so all styles of the div class can be used in this display on inline elements.

The 3px gap bug of floating elements in IE6:
Occurrence: A 3px bug that occurs when an element floats, and then a non-floating element naturally floats up close to it.
Solution: The right element also floats together; or add IE6 Hack _margin-left:-3px; to the right element to eliminate the 3px spacing.
Principle analysis: IE6 browser bug.

IE6/7 negative margin hidden bug:
Occurrence: When setting negative margin to a non-hasLayout element within a parent element with hasLayout, the part beyond the parent element is not visible .
Solution: 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 causes problems.

Ul/ol mark disappearance bug under IE6/7:
Occurrence: when ul/ol triggers haslayout and margin-left is written on ul/ol, the previous default The ul/ol tags will disappear.
Solution: Set margin-left for li instead of margin-left for ul/ol.
Principle analysis: IE6/7 browser bug

Overlap bug between margin and absolute elements under IE6/7:
Occurrence: In a double-column adaptive layout, the left element is absolutely positioned, and the right margin is positioned at a distance. Under IE6/7, the block-level element with the absolute attribute applied on the left overlaps with the adaptive text content on the right.
Solution: Change the left block-level element to an inline element, such as changing div to span.
Principle analysis: This is because IE6/IE7 browsers render inline horizontal label elements and block horizontal label elements equally without distinguishing between them. It is an IE6/7 browser rendering bug.

Auto margin centering bug under IE6/7/8:
Occasion: Setting margin to block element auto cannot be centered
Solution: The common reason for this bug is There is no Doctype, and then the quirks mode of IE is triggered, and the Doctype declaration is enough. The method given in "The Sunflower Guide to Defeating IE" is to add a width to the block element to solve the problem. However, according to my personal testing, adding with is ineffective. If there is no Doctype, even adding a width to the element cannot make the block The element is centered.
Principle analysis: Doctype declaration is missing.

Input[button | submit] under IE8 cannot be centered when setting margin:auto
Occasion: Under IE8, if a label like button (such as button input[type=" button"] input[type="submit"]) set { display: block; margin:0 auto; } if the width is not set, it cannot be centered.
Solution: You can add width to the input
Principle analysis: IE8 browser bug.

IE8 percentage padding vertical margin bug:
Occurrence: When the parent element has percentage padding set and the child element has vertical margin, it is as if the parent element has been set The margin is the same.
Solution: Add an overflow:hidden/auto to the parent element.
Principle analysis: IE8 browser bug