问题描述
- html 元素只设置padding 宽高区域不是预期效果
-
如下的一个HTML文档：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> a { background-color:#666666; padding:10px; } body { margin:0; padding:0; background-color:#00FF66 } </style> </head> <body> <a></a> <div style="width:100px; height:10px; background-color:#000000; margin:0; padding: 0"></div> </body> </html>a标签中没有任何内容，我只是设置了padding，但是效果如图所示：
图中灰色的是a标签背景色，他的区域实际是20*30（它的实际高度是30px），且覆盖在div上。理论上它的区域应该是20*20的小方块，高度多出的10px无法理解
下方的div标签显示的位置和区域感觉是正常的。
本人小白，求解
解决方案
你下面的div中设置的是一个高10px，宽100px的一个黑色条形，就像是你的页面中显示的那样，而你的a标签中虽然什么都没有，但是你在style里面为a标签
设置了样式，它的背景色为#666666，你的padding设置为10px，所以他就会在页面中显示出来。出现了现在的情况
解决方案二：
刚才好像回复了一堆。。。
另外，你现在看到那个灰色的它应该是左右的padding，正常来说你直接设置padding就是默认把上下左右都设置为10px，但是在你的这个页面中上下
padding都没有效果，只能显示左右的分别为10，也就是20px；
解决方案三：
为什么说a的区域就是20*20的呢？
解决方案四：
padding:-10px;
解决方案五：
a标签的 height：auto；是有默认值的 所以不是20px
时间： 2024-08-01 19:10:51