Category:CSS前端
Article From:https://www.cnblogs.com/sunmarvell/p/9124567.html

1.

Standard box model:

widthIt’s just the width of the content.

The total width of elements is =width + padding*2 +border*2 +margin*2.

IEBox model:

width=The width of the content + padding*2 + border*2.

The total width of elements is =width + padding*2 +border*2 +margin*2.

2.top

top The property specifies the top edge of the element. This attribute defines the upper outer margin of a location element.An offset between the boundary of the block and the block.

Note: if the value of the “position” attribute is “static”, the setting of the “top” attribute will not produce any effect. Position must be set.

<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:5px;
}
</style>
</head>

<body>
<img src="/i/w3school_logo_white.gif" />
<h1>This is a heading</h1>
</body>
</html>

Design sketch:

It can be seen that it is relative to his father’s element.

2.margin-top

Set the outer margin of the element.

<html>
<head>
<style type="text/css">
p.topmargin {background:yellow;margin-top: 100px;}
p.compare{background:blue;}
</style>
</head>

<body>
<p class="compare" >The paragraph does not specify the outer margin.</p>
<p class="topmargin">This paragraph has a specified up and out margin.</p>
</body>
</html>

Design sketch:

It can be seen that the outer distance of margin-top is the closest element to him.

 

Link of this Article: Box model, top and margin-top

Leave a Reply

Your email address will not be published. Required fields are marked *