盒模型演示

标准盒模型内边距、外边距、边框

这是一个内容宽度350px，高度150px,内边距25px,外边距25px,边框5px的盒子

替代盒模型内边距、外边距、边框

这是一个内容宽度350px，高度150px,内边距25px,外边距25px,边框5px的盒子

外边距塌陷

该段落p定义margin-bottom: 50px;

该段落p定义margin-top: 30px;

边框样式演示

外边框顶部定义为border-top: 5px dotted green;
外边框底部定义为border-bottom: 10px double red;
内边框border: 5px solid blue;
内边框右边框 border-right-width: 20px;

内边距样式演示

该盒子定义padding: 20px 10px;
该盒子定义padding-top:40px; padding-right:20px;padding-bottom:0;padding-left:30px;

这是h2标签 block转inline

这是mark标签1 inline转block 这是mark标签2 模式没转换

这是div标签1 block转flex
这是div标签2 block转flex

内联盒模型a内边距,ul定义为purple,li定义为chocolate

内联盒模型li转inline-block

内联盒模型a转inline-block

盒模型ul转flex