我们直接设置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标签的宽度！

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

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

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

一、padding来完成a标签高度

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

1、代码

a{bac千克round:#00F; color:#FFF}

.bb a{ padding:10px 0}

迎接访问css5.com.cn站点！

学习css，企图css题目上css5.com.cn

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

2、成绩截图

padding模拟出高度效果

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

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

1、使用css属性单词

display:block

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

2、div css实例代码

a{bac千克round:#00F; color:#FFF}

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

接待接见css5.com.cnweb！

学习css，规画css问题上css5.com.cn

3、功效截图

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

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

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

1、用display:inline-block完成a标签高度获胜奏效

这个属性与上一个display:block，甄别在于形成块但不会独有一行。

2、css实例代码

a{bac公斤round:#00F; color:#FFF}

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

接待会面css5.com.cnweb！

进修css，设计css标题上css5.com.cn

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

3、浏览器成就截图

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

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

去掉a标签下划线：对超链接下划线设置 使用代码＂text-decoration＂语法： text-decoration : none || underline || blink || overline || line-through text-decoration参数： none : .

为什么我这个没有下划线？ a:hover{color:red；} 我爱你

正常状态下的a标签是这样的。去掉下划线只需要在样式里面加入 a{ text-decoration:none； } 或者这里是.

a{ text-decoration:none； } 或者把这个属性分别加到a标签下，a:link{ text-decoration:none; } a:visited{ text-decoration:none; } a:hover{ text-decoration:none; } a:active{ text-.

首先来了解下标签的一些样式：a>标签的伪类样式 一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来.

你指的是哪个软件。是编程吗？还是什么其他的软件？如果是编程的话。我把命令给你：a{ text-decoration:none； } 把这个分别加到a标签下，a:link{ text-decoration:none; }.

a{} 标签对是一个网站的一条信息链接定义的，a:link {} /* 未访问的链接 */ a:visited {} /* 已访问的链接 */ a:hover {text-decoration:underline；