Quando uma borda de 1 px é adicionada à div, o tamanho da div aumenta. Não é necessário fazer isso

128

Ao clicar em estou adicionando, borda de 1px a div, então o tamanho da Div aumenta em 2px X 2px. Eu não quero aumentar o tamanho da div. Existe alguma maneira simples de fazer isso?

Explicação detalhada bagunçada
Na verdade, estou adicionando DIVs com float: left (left size, like icons) a um container-div, para que tudo seja empilhado um após o outro e quando (a largura do container-div for 300px), não haverá espaço na largura, portanto DIVs filhos vem na próxima linha, portanto, é semelhante ao catálogo, mas devido ao tamanho apenas do DIV selecionado da borda aumentar, o DIV no DIV selecionado vai para a direita e cria um espaço vazio abaixo do DIV selecionado.

EDIT:
Diminuindo Altura / Largura na seleção, mas como aumentá-lo de volta. Usando alguma estrutura de terceiros, não tenha evento quando o DIV perder a seleção.

Nachiket
fonte

Respostas:

49

A propriedade border css aumentará o tamanho "externo" de todos os elementos, excederá tds nas tabelas. Você pode ter uma idéia visual de como isso funciona no Firebug ( descontinuado ), na guia html-> layout.

Apenas como exemplo, uma div com largura e altura de 10px e borda de 1px terá largura e altura externas de 12px.

No seu caso, para fazer parecer que a borda está no "interior" da div, na classe CSS selecionada, você pode reduzir a largura e a altura do elemento dobrando o tamanho da borda ou pode fazer o mesmo para os elementos preenchidos.

Por exemplo:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}
Sean Amos
fonte
thnx, eu tinha a classe selecionada por .dragdrop, mas ela era usada por todos os objetos arrastáveis ​​e eu tinha três tamanhos diferentes (três tipos diferentes) de objeto arrastável, por isso continuei preenchendo o mesmo em todos os 3 E defini o preenchimento em selecionado .dragdrop. . & funcionou. :)
Nachiket 15/07
Esta não é uma boa solução para projetos responsivos. Usar outlineou uma borda com a mesma cor do plano de fundo (e alterar sua cor para outra coisa quando selecionada) é mais flexível.
AliBZ
1
Mas suponha que você precisa para evitar rígido codificação a largura, para permitir que o fluxo elemento ou responder à largura vista portas: ver a minha resposta utilizandoborder-color: transparent
Edward Newell
Não há necessidade desses cálculos, basta definir o tamanho da caixa como caixa da borda. Veja a resposta do ejfrancis abaixo e consulte este artigo .
Jbyrd #
Você tem certeza do td nas tabelas? No Chrome, ainda parece aumentar o tamanho.
Protector one
105

Isso também é útil nesse cenário. permite definir bordas sem alterar a largura da div

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Retirado de http://css-tricks.com/box-sizing/

ejfrancis
fonte
4
dimensionamento da caixa: a caixa de borda deve realmente ser definida como uma prática recomendada moderna. Consulte paulirish.com/2012/box-sizing-border-box-ftw
jbyrd
6
Isso não parece funcionar em alguns casos; não exatamente certo o porquê. Veja: codepen.io/anon/pen/QZaBQG
Wilson Biggs
51

defina uma borda antes de clicar para ter a mesma cor do plano de fundo.

Então, quando você clicar, basta alterar a cor do plano de fundo e a largura não será alterada.

corymathews
fonte
3
Engenhoso! gostaria de ter pensado nisso sozinho.
Rijul Gupta 11/08/2015
9
Sim, mas se você não tem um plano de fundo colorido sólido? Veja minha resposta usandoborder-color: transparent
Edward Newell
44

Outra boa solução é usar em outlinevez de border. Ele adiciona uma borda sem afetar o modelo da caixa. Isso funciona no IE8 +, Chrome, Firefox, Opera, Safari.

( https://stackoverflow.com/a/8319190/2105930 )

Chowey
fonte
É ótimo, mas comparando com a borda, não há "contorno à esquerda, ...", não para o meu caso.
Imskull #
2
Então recomendo usar box-shadowpor minha outra resposta em uma pergunta semelhante. Ele não tem o mesmo suporte a navegador, mas isso é menos problemático atualmente.
chowey
Obrigado #chowey, acabei de perceber que também box-shadowpode suportar borda de um lado, solução perfeita.
Imskull # 6/15
border-color: transparenttem melhor suporte entre navegadores --- veja minha resposta ...
Edward Newell
1
Este comentário está subestimado. É uma ótima maneira de contornar um elemento sem redimensioná-lo!
Sebastian Nemeth
42

Tente mudar borderpara outline:

outline: 1px solid black;
panwp
fonte
8
Funciona a menos que você tenha raio de borda.
Jean-Marie Dalmasso
28

Tendo usado muitas dessas soluções, acho que usar o truque da configuração border-color: transparenté o mais flexível e com amplo suporte:

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

Por que é melhor:

  • Não é necessário codificar a largura do elemento
  • Excelente suporte a vários navegadores (somente IE6 faltou)
  • Ao contrário de outline, você ainda pode especificar, por exemplo, as bordas superior e inferior separadamente
  • Ao contrário de definir a cor da borda como a do plano de fundo, você não precisará atualizá-la se alterar o plano de fundo, e ele é compatível com planos de fundo coloridos não sólidos.
Edward Newell
fonte
1
Eu achei que funcionava melhor com itens de tamanho dinâmico no meu UX. Parou completamente a mudança de tamanho no onMouseOver! Obrigado Sr. Newell!
d3r3kk
Genial. Te agradece!
Harald Hoerwick
Esse é esse!
enquanto verdadeiro
transparentisto é que necessidade!
Dimpiax # 9/19
Isto é o que eu preciso (Y)
HaxxanRaxa 12/01
20

Tente isto

box-sizing: border-box;
Hoang Trung
fonte
4
Esta deve ser a resposta, sujeira simples.
Spets 27/09
Por que isso não funciona em todos os lugares? Por exemplo, codepen.io/anon/pen/QZaBQG
Tom
oi @ Tom, não sei por que ainda não funciona. Mas, no seu caso, considere remover a altura do contêiner e usar o preenchimento. Pode resolver o seu problema.
Hoang Trung
17

Eu normalmente uso preenchimento para resolver esse problema. O preenchimento será adicionado quando a borda desaparecer e removido quando a borda aparecer. Código de amostra:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

insira a descrição da imagem aqui

Veja meu código de exemplo completo no JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Tho
fonte
1
Você pode me dizer o que realmente está acontecendo, estou confuso, por que, na fronteira ruim, o cursor aqui muda para baixo quando você passa o cursor sobre ele?
precisa saber é o seguinte
@SurajJain Porque o tamanho da div "borda ruim" será alterado (adicione 1px da borda) quando você passar o mouse sobre ela.
Tho
6

Apenas diminua a largura e a altura pelo dobro da largura da borda

Sadat
fonte
3

Você pode fazer coisas sofisticadas com sombras embutidas. Exemplo para colocar uma borda na parte inferior de um elemento sem alterar seu tamanho:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}
Luke Taylor
fonte
3

Às vezes, você não deseja que a altura ou a largura sejam afetadas sem definir explicitamente. Nesse caso, acho útil usar pseudo elementos.

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

Você também pode fazer muito mais com o pseudo elemento, portanto esse é um padrão bastante poderoso.

Jack Guy
fonte
1
Eu tinha uma borda de 1px que eu queria mudar para 2px, ea única maneira que eu poderia encontrar para fazer isso era através da remoção do widthe heighte adicionando um bottome leftpropriedade, além do tope left, tudo o que deve ser definida para a largura oposto a borda original (no meu caso -1px). Grande corte embora
Chase Sandmann
2

Tente diminuir o tamanho da margem ao aumentar a borda

uma corrida
fonte
2

Eu precisava ser capaz de "delimitar" qualquer elemento adicionando uma classe e não afetando suas dimensões. Uma boa solução para mim foi usar o box-shadow. Mas, em alguns casos, o efeito não era visível devido a outros irmãos. Então, eu combinei tanto sombra de caixa típica quanto sombra de caixa inserida. O resultado é uma aparência de borda sem alterar nenhuma dimensão.

Valores separados por vírgula. Aqui está um exemplo simples:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

Ajuste a sua aparência preferida e pronto!

Chris
fonte
2

Também podemos usar a função css calc ()

width: calc(100% - 2px);

subtraindo 2px para bordas

Rajeev Singh
fonte
1
.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
peevo
fonte
1
Eu acho que seria mais útil para o OP e outros visitantes, quando você acrescentar algumas explicações para sua intenção.
Reporter
1

Você pode criar o elemento com borda com a mesma cor do plano de fundo e, quando quiser que a borda apareça, basta alterar sua cor.

Matt Karatilovly
fonte
1
Sim, mas suponha que seu fundo não é uma cor sólida ... ver a minha resposta baseada no usoborder-color: transparent
Edward Newell
Ou todos juntos comoul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
stackunderflow 7/17/17
0

Caso seu conteúdo divseja renderizado dinamicamente e você queira definir sua altura, use um truque simples com outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

Exemplo aqui: https://codepen.io/Happysk/pen/zeQzaZ

Matúš Šťastný
fonte
Infelizmente, o contorno não possui cantos arredondados :(
M3RS 05/07
0

Você pode tentar inserir uma caixa de sombra

algo como isto: box-shadow: inset 0px -5px 0px 0px #fff

adiciona uma borda branca de 5px à parte inferior do elemento sem aumentar o tamanho

Mzard31
fonte