Example Analysis of Inner margin attribute and Outer margin attribute in HTML
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!
