1、行内元素标签设置了margin和padding后垂直方向是不起效的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <style>
  8.     span{
  9.         /* 水平方向的生效了，但垂直方向不会生效 */
  10.         margin: 100px;
  11.     }
  12. </style>
  13. <body>
  14.     <span>span</span>
  15. </body>
  16. </html>

image.png

2、解决办法：

用行高来解决

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <style>
  8.     span{
  9.         /* 水平方向的生效了，但垂直方向不会生效 */
  10.         margin: 100px;
  11.         line-height: 100px;
  12.     }
  13. </style>
  14. <body>
  15.     <span>span</span>
  16.     <span>span</span>
  17. </body>
  18. </html>

image.png