Example Analysis of css Inner margin and Outer margin attribute

This article mainly shows you the "css inner margin and outer margin attribute example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "css inner margin and outer margin attribute example analysis" this article.

Inner margin style: padding-top:10px; (top margin) padding-right:10px; (right border space) padding-bottom:10px; (bottom border space) padding-left:10px; (left border space)

It can also be simplified to padding:10px 10px 10px 10px; (corresponding to upper right, lower left) padding:10px 10px; (upper and lower, left and right) padding:10px 10px 10px; (top, left, right, bottom)

Margin style: margin-top:10px; (upper boundary blank) margin-right:10px; (right boundary blank) margin-bottom:10px; (lower boundary blank) margin-left:10px; (left boundary blank)

It can also be simplified to margin:10px 10px 10px 10px; (corresponding to upper right, lower left) margin:10px 10px; (upper and lower, left and right) margin:10px 10px 10px; (top, left, right, bottom)

Use exercise: we randomly write a paragraph of text, and set the background of the text to gray, the border to be a red 2px solid frame, the inner margin to be 10px, and the outer margin to be 10px. then our code is as follows:

The display in the web page is shown in the following figure:

The above is all the contents of the article "sample Analysis of css Inner and Outer margins". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!