html text css设置高度,CSS给a标签设置高度技巧方法_超链接a高度设置

用css给a标签设置高度失效，如何解决？如何使用css解决a标签高度失效问题，有哪些技巧方法？

相信大家已经试过了直接对a设置css高度属性是无效的，这个是因为a本身不具有块属性(没有骨架一样)，所以设置设置宽度也好均是无效的。

CSS5通过以下几种方法来实现高度效果布局。

一、padding来实现a标签高度

针对a标签只是想实现高度一样效果的，可以采用padding-bottom来实现。

1、代码

padding实现a高度一样效果 CSS5

a{background:#00F; color:#FFF}

.bb a{ padding:10px 0}

欢迎访问css5.com.cn网站！

学习css，解决css问题上css5.com.cn

为了能看到a高度效果，对a设置蓝色背景颜色，对class=bb对象内a设置

2、效果截图

padding模拟出高度效果

这种方法利用一定技巧来模拟a的高度，而a并没有设置高度。

二、独占一行a锚文本成功设置高度

1、使用css属性单词

display:block

加上这个标签元素形成块的css后再设置高度或宽度自然就生效了，缺点是设置后元素标签会独占一行。

2、div css实例代码

display:block实现a高度 CSS5

a{background:#00F; color:#FFF}

.bb a{ display:block; height:40px; line-height:40px}

欢迎访问css5.com.cn网站！

学习css，解决css问题上css5.com.cn

3、效果截图

实现a标签高度，但独占一行了

使用这个属性设置非块元素a标签，通常本身a就需要或可以独占一行的布局时候。

三、不独占一行a超链接设置高度

1、用

2、css实例代码

display:inline-block实现a高度 CSS5

a{background:#00F; color:#FFF}

.bb a{ display:inline-block; height:40px; line-height:40px}

欢迎访问css5.com.cn网站！

学习css，解决css问题上css5.com.cn

使用display:inline-block实现a元素标签即可设置高度、宽度生效，又不会独占一行。

3、浏览器效果截图

css实现a标签真实高度生效，又不独占一行

以上三种方法实现超链接a的高度，根据需求选择适合css布局方法。

作者：css5原创