点击链接元素能够实现页面跳转效果，是最为常用的元素之一。
实际应用中，可能会因为布局或者美观等需求，要设置给链接设置一个尺寸。
很多初学者可能会发现，虽然已经设置了尺寸，且代码毫无问题，但是页面表现却不尽如人意。
看如下代码实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>设置链接<a>的尺寸</title>
<style>
a{
width:120px;
height:80px;
border:1px solid red;
color:black;
text-decoration:none
}
</style>
</head>
<body>
<a href="http://www.softwhy.com">乐分享</a>
</body>
</html>
可以看到，css设置的链接a的尺寸，且代码毫无语法错误，但是并没有生效。
这是因为链接a元素是内联元素，width和height属性对内联元素无效。
那么首先将其转换为块级元素或者内联块级元素，就可以设置它的尺寸了。
代码修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>设置链接<a>的尺寸</title>
<style>
a{
width:120px;
height:80px;
border:1px solid red;
color:black;
text-decoration:none;
display:block;
}
</style>
</head>
<body>
<a href="http://www.cxvn.com">乐分享</a>
</body>
</html>
通过display:block将链接<a>元素转换为块级元素。
成功设置链接<a>元素尺寸，将内联元素转换为块级元素或者块级内联元素的方式有很多。
内联元素还有一个重要的特点需要注意，就是不能够设置上下内外边距。
不是说设置后不生效，而是会出现一些难以预料的效果，但是能够正常设置内联元素的左右内外边距。
代码实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>设置链接<a>的尺寸</title>
<style>
a{
width:120px;
height:40px;
border:1px solid red;
color:black;
text-decoration:none;
padding:10px;
}
</style>
</head>
<body>
<a href="http://www.cxvn.com">乐分享</a>
</body>
</html>
左右内边距的表现非常正常，看看顶部是不是非常奇怪。
所以对于内联元素你可以设置它的左右内外边距，但是要设置上下内外边距，需要将其转换为块级元素或者块级内联元素。下面再来罗列一下内联元素的一些特点：
（1）.无法设置尺寸。
（2）.可以使用text-align设置内联元素的对齐方式。
（3）.内联元素可以同时在一行排列。
（4）.内联元素不能设置上下内外边距，可能会出现意想不到的情况。
1.《设置链接<a>的尺寸》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《设置链接<a>的尺寸》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/266.html