Eu tenho um elemento <div>
e eu quero colocar uma borda nele. Eu sei que posso escrever style="border: 1px black"
, mas isto adiciona 2px a cada lado do div, que não é o que eu quero.
Eu preferia que esta borda estivesse a -1px da borda do div. O div em si é 100px x 100px, e se eu adicionar uma borda, então eu tenho que fazer alguma matemática para fazer a borda aparecer.
Existe alguma forma de eu poder fazer a fronteira aparecer, e garantir que a caixa ainda será de 100px (incluindo a fronteira)?
Defina a propriedade "tamanho da caixa" para "caixa de fronteira":
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>
Funciona em IE8 & acima.
Você também pode usar box-shadow como este:
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;
}
Exemplo aqui:
(pairar para ver a fronteira)Isto funciona apenas em navegadores modernos. Por exemplo: Sem suporte do IE 8. Veja caniuse.com (funcionalidade box-shadow) para mais informações.
para uma renderização consistente entre navegadores novos e antigos, adicione um contentor duplo, o exterior com a largura, o interior com a borda.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
isto só é obviamente se a sua largura precisa for mais importante do que ter uma marcação extra!