Shulou(Shulou.com)06/01 Report--

Editor to share with you the HTML inside margin attribute, outer margin attribute example analysis, I believe that most people do not know much, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

HTML Serial 38-inside margin attribute, outside margin attribute

I. Internal margin attribute

1. Definition: the distance between the border and the content is the inner margin

two。 Write separately

Padding-top: digital px;padding-left: digital px;padding-bottom: digital px;padding-right: digital px

3. Even write:

Padding: top right, bottom left

4. Note:

(1) after setting the inner margin to the label, the width and height occupied by the label will change.

(2) the inner margin will also have a background color.

Div {font-size: 25px; width:100px; height: 100px; border: 1px solid red; background-color: green;} .box1 {padding-top:20px;} .box2 {padding-left: 30px;} .box3 {padding-bottom: 40px;} .box4 {padding-right:50px } .box5 {padding:40px 60px 70px 80px;} I'm paragraph one, I'm paragraph two, I'm paragraph three, I'm paragraph four, I'm paragraph five.

II. Outer margin attribute

1. Definition: the distance between the label and the label is the outer margin

two。 Write separately:

Margin-top: numeric px;margin-left: numeric px;margin-bottom: numeric px;margin-left: numeric px

3. Write together

Margin: top left, bottom right

4. Examples

Span {width: 100px; height:100px; background-color: red; margin:50px; border:2px solid black;} .box1 {margin-top:20px;} .box2 {margin-left:30px;} .box3 {margin-bottom: 40px } .box4 {margin-rigth:50px;} .box5 {margin:60px 70px 80px 90px;} I'm span, I'm span?

5. Note: the part of the outer margin has no background color.

The above is all the contents of this article entitled "sample Analysis of Inner margin attribute and Outer margin attribute in HTML". 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!

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.