CSS 内外边距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css_margin.css"/> </head> <body> <p class="p1"> this is a p </p> <div class="div2"> <p class="p2"> this is p2 </p> </div> <div class="div3"> this is a div </div> </body> </html>
.p1{ width: 300px; /* 外边距 四个值 */ margin-bottom: 100px; /* 水平居中 */ margin: auto; border: 2px solid red; } .div2{ margin-left: 100px; } .p2{ /* 继承外元素 */ margin-left: inherit; } .div3{ border: 2px solid red; /* 内边距 */ padding: 25px ; /* 实际宽度300+25*2 */ width: 300px; /* 保持宽度300不变 */ box-sizing: border-box; }