CSS basic tutorial: padding and margin properties
CSS padding properties: the distance between the border line and the content
Note: What we usually call the width and height properties, they Refers to the width and height of the content, excluding inner and outer margins and border lines.
padding-left: left inner padding distance, the distance between the left line and the content.
padding-right: the right inner padding distance, the distance between the right line and the content.
padding-top: top inner padding distance, the distance between the top edge and the content.
padding-bottom: the distance between the bottom padding and the bottom line to the content.
Abbreviated form
padding:10px; //The inner padding on the four sides is 10px
padding:10px 20px; //10px for top and bottom, 20px for left and right
- ##padding:5px 10px 20px; //5px for top and 10px for left and right , the bottom is 20px
- padding:5px 10px 15px 20px; //The order must be "top, right, bottom, left"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
padding:20px;
}
</style>
</head>
<body>
<div class="box">互聯(lián)網(wǎng)是20世紀最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。
</div>
</body>
</html>
CSS margin property: the distance outward from the edge
- ##margin- left: the distance outward from the left line.
- margin-right: The distance outward from the right line
- margin-top: The distance outward from the upper edge line.
- margin-bottom: The distance outward from the bottom line.
- Abbreviated form
- margin:10px 20px //Top and bottom margins 10px, left and right margins 20px
- margin:5px 10px 15px; //Top and bottom margins 5px, left and right margins 10px, bottom margin 15px
- margin:5px 10px 15px 20px; //The order must be "top, right, bottom, left"
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box{ border:1px solid red; background-color:#f0f0f0; width:300px; margin:20px; } </style> </head> <body> <div class="box">互聯(lián)網(wǎng)是20世紀最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。 </div> </body> </html>Note: padding and margin are easy to confuse, please carefully observe the difference in the output of the two examples
