https://blog.csdn.net/weixin_30344519/article/details/117859933
https://www.yzktw.com.cn/post/14740.html
style="font-size:15px;"
我们直接设置html代码中的a标签高度和宽度是不会起作用的，这是因为a标签属于内联元素标签，而内联元素不支持设置宽度(width)和高度(height)，那么， a 标签如何设置宽度和高度。
为什么设置a标签宽高无效
a标签属于内联元素(也叫行内元素)，而内联元素默认的css样式属性是display:inline，直接设置内联元素的宽度(width)和高度(height)是无效的，因为内联元素的宽高是随其内容的宽度和高度大小而变化的；当内联元素中存在文本时，其高度由文本的字体大小所决定；
上图代码演示中，我们设置了a标签的宽高都是130px，还设置了背景颜色为红色，
a{
width:130px;
height:130px;
background:red;
}
之所以设置背景颜色为红色，即background:red，这样做的话，a标签所占有的区域就会显示为红色，那么，我们就能清楚的观察到a标签宽度和高度的变化了；
在代码中，我们虽然设置了宽度和高度都是130px，但发现a标签的文字内容，也就是“刘代码博客”五个汉字的宽高和背景红色的高宽是一致的(如下如所示)，可见，我们设置a标签的高宽并没有发生变化，也就意味着，我们直接对a标签设置宽度和高度是不起作用的(如下如所示)！
不仅仅是a标签在默认情况下，直接设置宽度和高度是无效的，而且几乎所有的内联元素和a标签一样，设置宽度和高度也是无效的！
设置a标签宽高的三种方法
想要让a标签的宽度和高度起作用，我们可以通过以下三种方法实现：
1、将内联元素a标签转化成块级元素
在a标签的CSS样式中设置：display:block，就可以将a标签转化成块级元素，如下图所示：
由上图可知，在CSS样式中设置：display:block，将a标签转化成块级元素后，设置的高度和宽度都起作用了，但我们还发现，a标签的文字内容没有居中，这样也会影响布局！
我们可以在CSS样式中设置text-align: center(水平居中)和line-height: 130px(垂直居中)；line-height属性值要和a标签的高度一致，才能保持垂直居中！
2、将内联元素a标签转化成内联块级元素：
在a标签的CSS样式中设置：display:inline-block，将内联元素的a标签转化成内联块级元素，如下图所示：
从上图中我，可以看见将a标签转化成内联块级元素(inline-block)后，设置的宽度和高度也生效了！
3、使用float属性将a标签设置为浮动状态
在CSS样式中给a标签设置为 float属性(float:left/right)， 让它变成浮动状态后，就可以设置宽度和高度了*(如下图所示)，但缺点可能会造成与其它文字内容重叠。
最后总结
1、当a标签能设置宽度后，可以使用CSS样式属性：text-align: center进行水平居中；设置了高度后，就可以设置CSS样式属性line-height的值进行垂直居中，但要注意的是，line-height的属性值要和高度保持一致才能正确显示垂直居中；
2、将内联元素的a标签转化成块级元素(block)后，就会独占一行显示，如果不想独占一行，可以将a标签转化为内联块级元素(inline-block)，因为内联块级元素是不会独占一行显示的！
3、网上有些文章提到，使用padding(内边距)和margin(外边距)属性设置a标签的左右边距来模拟a标签的宽度！
标签：标签,元素,高度,宽高,宽度,设置,内联 From： https://www.cnblogs.com/Dongmy/p/17277049.html