02-CSS基础与进阶-day5_2018-09-03-22-10-39

08盒模型之margin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
              width: 200px;
              height: 200px;
              background-color: pink;
              padding: 4px;
             /*  margin: 20px; */
              /* margin-top: 10px;
              margin-right: 20px;
              margin-bottom: 30px;
              margin-left: 40px; */
              margin: 20px auto; /*左右auto 这样可以让块级带有宽度的盒子水平居中对齐*/
       }
       span {
             margin: 0 auto; /*无效 因为span是行内元素*/
       }

       header {
              margin: 0 auto; /*无效 因为没设置宽度*/
              width: 400px;
       }
    </style>
</head>
<body>
    <div></div>
    <header>头部</header>
    <span>span</span>
</body>
</html>