Write the project time has been used to the margin, today spent a good afternoon to study the margin, found that the CSS margin is not so simple. Here we share with you:One, the inner marginAs the following codeHtml:Css:. test{width:100px;height:100px;Background-color: #fbc;padding:10px 20px 30px 40px;}This time in thi
;Head>Body> Divclass= "Div1">Css1Div> Divclass= "Div2">Css2Div>Body>HTML>The phenomenon is:Second case:A wide height of 200px div1 embedded a wide height of 100px div2, when set margin:30px to Div2, the phenomenon is:At this point outside of the big Div's margin has also become 30px, the following paragraph to so
beginning of many CSS pages:
*{ margin:0; padding:0}
Because many elements have default padding or padding, such as body, ul, p, and title element h1-h6. With the above code, you can easily clear the outer and inner margins of all elements, but it also causes problems. For example:
The above code may cause text input in Some browsers to be displayed in the up
Whether the inner margin of the parent object in the CSS is affected by the outer margin of the child object:Recommendation: As far as possible handwriting code, can effectively improve the learning efficiency and depth.Sometimes there may be questions about whether the inner margin of the parent object padding the mar
There is a magical problem when designing the page, which is the HTML code
At this point I set the homecategory of the child container:
. homecategory{margin-top:30px;}Found margin relative to the parent container wrong, find body went, became relative to the body to set margin
elements? Yes. Here we are talking about elements, not text. Floating elements will affect the text location! We can even speculate that the initial design of float is to solve the following problem-to wrap the text around an image, just like the W3C case below:
4. Floating streams are placed above the standard streams (that is, the elements of the floating streams will overwrite the elements of the standard streams)This can be seen from the above example. I will not talk about it here.
Vi. Pr
Do you really know the margin? Do you know what the margin is? Do you know what a vertical margin merger is? What is the difference between a margin in a block element and an inline element? When should I use padding instead of margin? Do you know the negative
margin overlapExcerpt from the css2.1 specification Chinese version
In CSS, adjacent margin of two or more boxes (possibly but not necessarily brothers) is combined into a margin. Margin is called overlapping in this way (collapse), the resulting union
. However, in practical applications, there are always some things that make you elusive, and they are more or less related to margin.Note: When you want the content of the two elements to be separated in the vertical direction (vertically), you can choose either Padding-top/bottom or Margin-top/bottom, and it is recommended that you use padding-top/as much as possible. Bottom to achieve your goal, because there is a collapsing margins (collapsed marg
This article reprinted from: http://www.cnblogs.com/linjiqin/p/3556497.html, thanks to the relevant bloggers.Graphical CSS padding, margin, border propertiesThe organization recommends that all the images on the Web page be placed in a box where the designer can control the properties of the box by creating a definition that includes paragraphs, lists, headings, pictures, and layers. The box model mainly de
I have always thought that the margin property is a very simple property, but recently I have encountered some problems in the project, only to find that the margin property has some "pits", I will introduce the basic knowledge of margin and the "pit". This blog post is mainly divided into the following sections:
marg
like the following, the overall center, the elements in a row, of course, the layout of the way there are many kinds of, then if we use a floating layout or display:inline-block layout What will happen, we can see, If the above two ways to layout, then the width of each block and the gap will exceed the width of the containing block, of course, we can also increase the width of the containing block to leave enough space for the elements to place, but this method is obviously undesirable, then h
sub-element id2. the distance from "be" in "3.
Additional:
The number of parameters in the padding attribute in CSS, for example:
Body {padding: 20px ;}
Body {padding: 20px 30px ;}
Body {padding: 20px 30px 10px ;}
Body {padding: 20px 30px 10px 20px ;}
Details are as follow
css| Web | detailed
Margin in Chinese we translate the outer margin or outside filler (the outer margin is referenced in this article). He is the underlying attribute of the element box model (box models).
First, the basic characteristics of margin
The
parameters in the Padding property in CSS, for example:body {padding:20px;}body {padding:20px 30px;}Body {padding:20px 30px 10px;}Body {padding:20px 30px 10px 20px;}detailed description is as follows:If only one is provided, it will be used for all four edges;If two are supplied, the first one is used up-down and the
-top/bottom outer edge (outer top/bottom) of the child element ID2, which is fig. The distance of be in 3.Additional:The definition of the number of parameters in the Padding property in CSS, for example:body {padding:20px;}body {padding:20px 30px;}Body {padding:20px 30px 10px;}Body {padding:20px 30px 10px 20px;}detail
deep understanding of margin properties in CSS I have always thought that the margin property is a very simple property, but recently I have encountered some problems in the project, only to find that the margin property has some "pits", I will introduce the basic knowledge of mar
;margin-bottom:30px;margin-left:20px;}
Of course, it may be easier to use margin for this scenario:
p {margin:20px 30px 30px 20px;}
The results are the same whether you use a single-sided attribute or a margin. In general, if you want to set margins for multiple edges, it is
"cheating" and is folded away.How to solve the folding problem : Perhaps the first thought of the solution is based on the cause of the collapse-auto, to solve the problem. However, in the actual operation, some elements such as Div, H1, p, etc., we can not know in advance how high it is, so in the CSS file is not routinely by declaring the height of the element to solve the collapse problem.We need to add the following code to the
You are learning margin and padding when you are ignorant,--what his Niang inner margin, what his niang margin. Oh ah, at first I also a bit do not understand, and later through the study of information learning finally figured out, and now I will talk about their own margin and padding understanding:
First, what is t
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.