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

行內元素的盒模型行內元素不支持設置寬度和高度行內元素可以設置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)