Home > Developer > JavaScript

Html css -- learning of margin and padding, marginpadding

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Html css -- learning of margin and padding, marginpadding
Http://www.cnblogs.com/fengyv/p/3789333.html when you are learning margin and padding is not done, -- what his mother's padding, what his mother's margin. Haha, I didn't understand it at first, but I finally understood it through data query. Now I will talk about my understanding of margin and padding:

I. What are margins?

The margin in CSS refers to the distance (or space) between the current element border and other surrounding elements border ).

2. What is the padding and what is the margin?

Code 2-1:

  1. <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <Html xmlns = "http://www.w3.org/1999/xhtml">
  3. <Head>
  4. <Meta http-equiv = "Content-type" content = "text/html; charset = UTF-8"/>
  5. <Style type = "text/css">
  6. Body {
  7. Margin: 0px;
  8. }
  10. . Test1 {
  11. Width: 150px;
  12. Height: 150px;
  13. Border: 6px solid red;
  14. }
  16. . Test2 {
  17. Margin-top: 40px;
  18. Padding-top: 40px;
  19. Width: 150px;
  20. Height: 150px;
  21. Border: 6px solid gray;
  22. }
  24. . Test2_son {
  25. Width: 80px;
  26. Height: 50px;
  27. Border: 12px solid blue;
  28. }
  29. </Style>
  30. </Head>
  31. <Body>
  32. <Div class = "test1"> test1 </div>
  33. <Div class = "test2">
  34. <Div class = "test2_son"> test2_son </div>
  35. </Div>
  36. </Body>
  37. </Html>

Figure 01

Note: In Figure 01, the gray area is the border of the div whose class value is test2. It has a width;

①. Margin: the margin refers to the elements used by margin (here, the class value is test.2(If the other element is the same as the element used by margin, the class value is test .)1(Div) or inner (if another element is the parent level of the element to which margin is applied), such;

②. Padding: the padding refers to the extension distance between the border of the margin element (the div with the class value test2) and the border of its child element, for example;

③ The internal and external margins are used for the elements and other elements. The internal margins of an element may appear in the eyes of another element, for example: the class value is test.2The inner margin of the div seems to be the outer margin when the class value is test2_test div, so the code above can also write as follows: Set the class value to test2In the div style list of, remove "padding-top: 40px;" and add "margin-top: 40px" to the class value test2_test div element; "-- the effect is the same as that of Code 2-1;

3. Attributes of margin and padding

① Their default values are all 0; their attribute values can be used to calculate the outer margin for the auto -- margin element, and the padding for the padding element is calculated by the browser; you can inherit the margin of the parent element by setting the property value to inherit -- margin inherits the margin of the parent element, and padding inherits the padding of the parent element, however, because inherit is not supported in any version of Internet Explorer (including IE8), it is unnecessary to learn.

②. Margin allows you to specify a negative margin value, but be careful when using it. padding does not allow you to specify a negative margin value;

③ Attributes of margin and padding can have one, two, three, and four attributes:

A. margin has four attribute values (for example, margin: 10px 5px 15px 20px;). The values are: Top margin: 10px, right margin: 5px, bottom margin: 15px, and left margin: 20px;

Padding has four attribute values (for example, padding: 10px 5px 15px 20px;). It indicates that the top margin is 10px, the right margin is 5px, the bottom margin is 15px, and the left margin is 20px;

Conclusion: whether it is margin or padding, if there are four attribute values, their direction is clockwise, top, right, bottom, left;

B. margin has three attribute values (for example, margin: 10px 5px 15px;). The values include: Top margin 10px, right margin and left margin 5px, and bottom margin 15px;

Padding has three attribute values (for example, padding: 10px 5px 15px;), which indicate: Top margin: 10px, right margin, left margin: 5px, and bottom margin: 15px;

Conclusion: whether it is margin or padding, if there are three attribute values, their direction is clockwise, top right left, bottom;

C. margin has two attribute values (for example, margin: 10px 5px;), which indicate: Top margin and bottom margin 10px, right margin and left margin 5px;

Padding has two attribute values (for example, padding: 10px 5px;). It indicates that the top and bottom margins are 10px, the right and left margins are 5px;

Conclusion: whether it is margin or padding, if there are two attribute values, their direction is clockwise up and down, right left;

D. margin has one attribute value (for example, margin: 10px;), which means that the four margins are 10px;

Padding has one attribute value (for example, padding: 10px;), which means that the four padding values are 10px;

Conclusion: whether it is margin or padding, if one attribute value exists, their margins are equal.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html and css book html and css duckett html and css jobs css body margin html and css coding software head first html and css html and css book pdf
Related Article
Ajax and 302 response code test_javascript-js tutorial

Contact Us

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More