Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use padding and margin attributes in CSS". In daily operation, I believe many people have doubts about how to use padding and margin attributes in CSS. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to use padding and margin attributes in CSS". Next, please follow the editor to study!

Margin and Padding properties of CSS

Margin and padding are used to separate elements, margin is to separate elements from the outside, and padding is to separate elements inside.

Example H3:

H3 {font-size:1.5em; background-color:#ccc; margin:1em; padding:3em;}

The attribute that can be set on the four sides of the element: margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left

CSS box model BoxModel

Width and height define the width and height of the Content section, and the width of the paddingbordermargin is added to it in turn. The background populates the padding and content sections. However, due to problems in browser design, the display effect of different browsers will be different. The problem of doubling left and right Margin when box is float, the margin around box in IE6 will double

The box patterns defined by the W3C are as follows:

Width and height define the width and height of the Content section, and the width of the paddingbordermargin is added to it in turn. The background populates the padding and content sections.

However, due to problems in browser design, the display effect of different browsers will be different.

The problem of doubling Margin

When box is float, the margin around box in IE6 doubles. For example:

Www.webjx.com .outer {width:500px; height:200px; background:#000;} .inner {float:left; width:200px; height:100px; margin:5px; background:#fff;}

The left margin of the inner on the left is significantly larger than that of 5px.

At this point, the display property of the inner is defined as inline.

At this point, the study on "how to use the padding and margin properties in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.