如何移除图片及文本超链接的下划线并修改链接文本颜色？

问题说明 #

为图片添加超链接后出现无法移除的下划线，使用text-decoration: none;仅对文本生效，图片下划线仍存在；同时希望将“Inicio”“Samsung”等链接文本改为普通文本样式，去除默认的蓝紫色。

解决方案 #

修改CSS代码如下，可同时解决两个问题：

* {
  background-color: #eeeeee;
}

#parte1 {
  background-color: #da291c;
}

#parte2 {
  background-color: white;
  margin: 10px 480px 10px 0px;
}

#parte3 {
  background-color: blueviolet;
  margin: 10px 480px 10px 0px;
}

#logo {
  background-color: #da291c;
  margin-top: 10px;
  margin-bottom: 10px;
  /* 移除浏览器默认给图片链接添加的边框 */
  border: none;
}

#parte1-samsung {
  background-color: #da291c;
}

#parte2-samsung {
  background-color: white;
  margin: 10px 480px 10px 0px;
}

/* 重置所有链接的文本装饰与颜色 */
a {
  text-decoration: none;
  /* 继承父元素的文本颜色，消除默认蓝紫色 */
  color: inherit;
}

/* 消除图片链接的行内间距导致的下划线视觉残留 */
a img {
  display: block;
}

原理说明 #

1. 图片链接下划线/边框问题：部分浏览器会自动给<a>标签包裹的图片添加默认边框，看起来像下划线；同时图片作为行内元素，会和基线产生微小间距，也可能被误认为下划线。通过border: none;移除默认边框，display: block;让图片脱离行内流，彻底消除间距问题。
2. 链接文本样式问题：给<a>标签设置color: inherit;，让链接文本继承父元素的颜色，直接覆盖浏览器默认的蓝紫色链接样式，变成普通文本的颜色。

内容的提问来源于stack exchange，提问作者Alvaro Ramirez