不管是文字还是图片,我只要加了超链接之后,文字或者图片上边就会空出几行的空间,这是为什么?

html-css015

不管是文字还是图片,我只要加了超链接之后,文字或者图片上边就会空出几行的空间,这是为什么?,第1张

先说图片:

当为图像元素定义链接后,浏览器会为图像元素增加2个像素的蓝色边框,用来和普通的图像元素区分,可这样取消:<a href=”test.htm”><img src="image.gif" border="0" /></a>也可在css文件中定义:a img{border-style:none}

再说说你所说的“本来是四个字的文字”:

在没给它加链接前它还是文本,加了链接元素<a></a>后它成了内联元素,如果两个内联元素之间出现空隔或换行,html页面文档在浏览器解释时都会自作多情地出现一个字符的间距。形如:

1、中间有空格

<a href=”abcd.htm”>四个文字</a> <img src="image.gif" border="0" />

2、换行了

<a href=”abcd.htm”>四个文字</a>

<img src="image.gif" border="0" />

所以,造成“本来是四个字的文字,分成了两行,一行两个字。”的可能:

1、图像元素多了4个像素,左右各2像素。建议用以上方法取消边框。

2、两个内联元素之间有空格或换了行。建议所有的内联元素写在一行内,且不要加空格和回车。

设置文字间距可以使用 CSS letter-spacing 属性

定义和用法

letter-spacing 属性增加或减少字符间的空白(字符间距)。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

注释:允许使用负值,这会让字母之间挤得更紧。

可能的值

实例

/*设置所有a元素的字符间距为十像素*/

a{letter-spacing:10px}

css中用white-space:nowrap定义div等标签,使文字不换行。表格中用<td nowrap="nowrap">数量数量数量数量</td>这样,使文字不换行