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>