行内元素的盒子模型 · 前端

行内元素的盒模型行内元素不支持设置宽度和高度行内元素可以设置padding,但是垂直方向padding不会影响页面的布局行内元素可以设置border,但是垂直方向的border不会影响页面的布局元素可以设置margin,但是垂直方向的margin不会影响 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; } span{ width: 100px; height: 100px; margin: 100px; } a{ width: 100px; height: 100px; margin: 100px; } </style> </head> <body> <a href="">链接</a> <span>文本</span> <div class="box1"></div> </body> </html> ``` ![](https://img.kancloud.cn/3e/90/3e903e194f8ed26896cfedef088c8f64_501x195.png) 可以看到行内元素设置宽高无效，margin垂直方向无效 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; } span{ width: 100px; height: 100px; padding: 100px; margin: 100px; border: 20px solid blue; } a{ width: 100px; height: 100px; margin: 100px; border: 20px solid blue; padding: 100px; } </style> </head> <body> <a href="">链接</a> <span>文本</span> <div class="box1"></div> </body> </html> ``` ![](https://img.kancloud.cn/e0/4c/e04c1a59d8bf81e753b8fe31c91dca18_828x209.png)