CSS给a标签设置高度技巧方法

用css给a标签设置装备摆设高度失效，若何意图？若何运用css希图a标签高度失效问题，有哪些伎俩法子？

信赖各人也曾试过了直接对a设置装备摆设css高度属性是有效的，这个是由于a本人不具有块属性（没有骨架同样），所以设置css高度也好，设置宽度也好均是有用的。

CSS5颠末下列几种门径来完成高度成绩机关。

一、padding来完成a标签高度

针对a标签只不过想完成高度同样成绩的，或许采用padding-top与padding-bottom来实现。

1、代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>padding完成a高度一样成效 CSS5</title>
<style>
a{bac千克round:#00F; color:#FFF}
.bb a{ padding:10px 0}
</style>
</head>
<body>
<p>迎接访问<a href="#">css5.com.cn</a>站点！</p>
<p class="bb">学习css，企图css题目上<a href="#">css5.com.cn</a></p>
</body>
</html>

为了能看到a高度效果，对a设置蓝色后盾色调，对class=bb对象内a设置装备摆设padding高下10px,padding支配为0，这样独霸padding内边距造诣模拟出a的高度功效。

2、成绩截图

padding模拟出高度效果

这种方式操纵一定才力来模仿a的高度，而a并不有设置高度。

二、独占一行a锚文本告捷配置高度

1、使用css属性单词

display:block
加之这个标签元素造成块的css后再配置高度或宽度人造就起效了，偏差是配置后元素标签会独有一行。

2、div css实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:block完成a高度 CSS5</title>
<style>
a{bac千克round:#00F; color:#FFF}
.bb a{ display:block; height:40px; line-height:40px}
</style>
</head>
<body>
<p>接待接见<a href="#">css5.com.cn</a>web！</p>
<p class="bb">学习css，规画css问题上<a href="#">css5.com.cn</a></p>
</body>
</html>

3、功效截图

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

使用这个属性配置非块元素a标签，一样平常本身a就必要或可以或许独占一行的布局时刻。

三、不独有一行a超链接配置高度

1、用display:inline-block完成a标签高度获胜奏效
这个属性与上一个display:block，甄别在于形成块但不会独有一行。

2、css实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:inline-block实现a高度 CSS5</title>
<style>
a{bac公斤round:#00F; color:#FFF}
.bb a{ display:inline-block; height:40px; line-height:40px}
</style>
</head>
<body>
<p>接待会面<a href="#">css5.com.cn</a>web！</p>
<p class="bb">进修css，设计css标题上<a href="#">css5.com.cn</a></p>
</body>
</html>

使用display:inline-block完成a元素标签就可配置高度、宽度见效，又不会独占一行。

3、浏览器成就截图

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

以上三种办法完成超链接a的高度，遵循需求决议适合css布局方法。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-hack/c52673.shtml