Tengo un elemento <div>
y quiero ponerle un borde. Sé que puedo escribir style="border: 1px solid black"
, pero esto añade 2px a cada lado del div, que no es lo que quiero.
Preferiría que este borde estuviera a -1px del borde del div. El div en sí es de 100px x 100px, y si añado un borde, entonces tengo que hacer algunas matemáticas para que el borde aparezca.
¿Hay alguna manera de hacer que el borde aparezca, y asegurar que la caja siga siendo de 100px (incluyendo el borde)?
Establecer la propiedad box-sizing
a border-box
:
-- begin snippet: js hide: false -->
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
Fin del fragmento;
Funciona en IE8 & arriba.
También puedes usar box-shadow así:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Ejemplo:
(pase el ratón para ver el borde)Esto funciona sólo en los navegadores modernos. Por ejemplo: No es compatible con IE 8. Ver caniuse.com (función box-shadow) para más información.
para una representación consistente entre navegadores nuevos y antiguos, añada un contenedor doble, el exterior con el ancho, el interior con el borde.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
¡esto es, obviamente, sólo si su anchura precisa es más importante que tener el marcado extra!