盒子模型
总体来说,如果不设置宽度width,margin是对盒子的宽度是有影响的。
设置的width、height等都是content的大小:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_盒子模型的组成部分</title> <style> div { /* 内容区的宽 */ width: 400px; /* 内容区的高 */ height: 400px; /* 内边距,设置的背景颜色会填充内边距区域 */ padding: 20px; /* 边框,设置的背景颜色会填充边框区域 */ border: 10px solid transparent; /* 外边距,设置的背景颜色不会填充外边距,外边距 margin 不会影响盒子的大小,但会影响盒子的位置。*/
*/ margin: 50px; font-size: 20px; background-color: gray; } </style> </head> <body> <div>你好啊</div> </body> </html>