代码描述:设置链接 <a>尺寸。设置链接<a>的尺寸
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.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">51前端</a> </body> </html>
可以看到,css设置的链接a的尺寸,且代码毫无语法错误,但是并没有生效。 这是因为链接a元素是内联元素,width和height属性对内联元素无效。 那么首先将其转换为块级元素或者内联块级元素,就可以设置它的尺寸了。 代码修改如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.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.51qianduan.com">51前端</a> </body> </html>
通过display:block将链接<a>元素转换为块级元素。 成功设置链接<a>元素尺寸,将内联元素转换为块级元素或者块级内联元素的方式有很多。 内联元素还有一个重要的特点需要注意,就是不能够设置上下内外边距。 不是说设置后不生效,而是会出现一些难以预料的效果,但是能够正常设置内联元素的左右内外边距。 代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.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.51qianduan.com">51前端</a> </body> </html>
左右内边距的表现非常正常,看看顶部是不是非常奇怪。 所以对于内联元素你可以设置它的左右内外边距,但是要设置上下内外边距,需要将其转换为块级元素或者块级内联元素。下面再来罗列一下内联元素的一些特点: (1).无法设置尺寸。 (2).可以使用text-align设置内联元素的对齐方式。 (3).内联元素可以同时在一行排列。 (4).内联元素不能设置上下内外边距,可能会出现意想不到的情况。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能