El atributo border=0

¿Para qué usamos border="0" en las imágenes?

La teoría es la siguiente: por defecto, los navegadores crean un borde automático en toda etiqueta IMG que sea un enlace; ese borde tiene un pixel de ancho y es del mismo color que el texto de los enlaces y por lo tanto, si no queremos que se muestre ese borde, debenos agregar ese atributo.

Cuando subimos una imagen a Blogger, el código siempre es un enlace que permite abrir la imagen original y si bien nos muestra un código "excesivo", de todos modos, allí está el famoso atributo:

<div class="separator" style="clear: both; text-align: center;">
  <a href="http://......./s1600/........" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="xxx" src="http://......./sxxx/........" width="xxx" />
  </a>
</div>

Entonces, ¿basta que pongamos border="0" para que una imagen no tenga borde?

Si pero no; esta es la misma imagen con el mismo código y sin embargo, tiene un borde:

¿Por que ocurre eso? Porque lentamente, los atributos de las etiquetas van siendo reemplazdos por el CSS y esto no es una moda; las regla de estilo, tienen prioridad sobre los atributos así que si agregamos una regla que diga que los enlaces tengan borde, el border="0" será ignorado.

En Blogger, todo eso suele estar definido al inicio; por ejemplo, en una plantilla minima dice esto:

a:link {
  color:$linkcolor;
  text-decoration:none;
}
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
}
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
}

Y por supuesto, podemos modificarlo como se nos ocurra:

a:link, a:visited {
  color: #FF0;
  outline: none;
  text-decoration:none;
}
a:hover {
  color: #F0F;
  outline: none;
  text-decoration:none;
}
a img {
  border: none;
}

o establecer reglas específicas para las imágenes de las entradas

.post img {
  border:4px outset #940f04 ;
  padding:4px;
}

o ya que Blogger agrega una clase, podemos usarla:

.separator {
  .......
}
.separator img {
  .......
}
.separator img:hover {
  .......
}

Algo similar ocurre con otros atributos como width y height.

Usando el mismo código agregado por Blogger podemos crear reglas que lo modifiquen y estas reglas de estilo, tendrán prioridad sobre los atributos:

.separator img {
  background-color: #EEE;
  border: 5px solid #ABC;
  height: 100px;
  outline: 1px solid #DDD;
  padding: 5px;
  width: 100px;
}