使用 CSS 文本缩进和 Padding 隐藏文本

Question

一个网站都会有一个 LOGO，这似乎是一条通用的布局和内容，而对于这个 LOGO 的代码编写，一般都会使用 <img /> 插入 LOGO 图片，然后再写上文字的描述，其实这样的方法有点过时了，因为这些描述文本只针对于这张 LOGO 图片，而放置更多的内容时候，搜索引擎不认为和网页的内容有多大的关系。

text-indent

CSS中的 text-indent 属性是设置段落文本缩进，如果我们给他设置 text-indent:100%，那么文本将会空一行出来，通过这个属性，我们可以应用到我们 LOGO 布局中。

我们将 LOGO 图片作为背景图放置到标签里面，然后添加 text-indent 属性，文本不换行，超出部分隐藏，那么这些文本将不会显示，也不会被搜索引擎判断为作弊。

.logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background:url(images/logo.png) no-repeat;
  height:24px;
  width:72px;
}

在 .logo 容器里面放置再多的内容，都不会显示出来。

Padding

Padding 属性用于设置元素的填充，同样我们定义背景图，而将 padding 设置为和容器一样的宽度，然后容器的宽度设置为 0，那么容器里面的内容也不会显示出来。

.logo {
  padding-left:72px;
  overflow: hidden;
  background:url(images/logo.png) no-repeat;
  height:24px;
  width:0;
}

上面两个隐藏文本的方法不同于以往的搜索引擎作弊方法，他不是直接将文本设置 display:none; 隐藏起来，而是通过合理的计算方式，让文本隐藏。