web-dev-qa-db-fra.com

Lorsque la bordure 1 px est ajoutée à div, la taille de Div augmente, vous ne voulez pas le faire

Au clic j'ajoute, frontière 1px à div, donc la taille de Div augmente de 2px X 2px. Je ne veux pas que la taille de Div soit augmentée. Existe-t-il un moyen simple de le faire?

Explication détaillée compliquée
En fait, j’ajoute des DIV avec float: left (même taille, comme des icônes) dans un conteneur-div, donc toutes les piles se superposent, et lorsque (conteneur-div est 300px), aucun espace n'est laissé. Pour que les DIV enfants apparaissent dans la rangée suivante, son catalogue est similaire, mais à cause de la bordure, seule la taille de DIV sélectionnée est augmentée, DIV sous DIV sélectionné va à droite et crée un espace vide en dessous de DIV sélectionnée.

EDIT:
Diminution de la hauteur/largeur sur la sélection, mais comment l'augmenter. Utiliser un framework tiers, donc ne pas avoir d’événement quand DIV perd sa sélection.

csshtmlborder
101
Nachiket

La propriété css de la bordure augmentera la taille "externe" de tous les éléments, sauf les tds des tableaux. Vous pouvez avoir une idée visuelle de la façon dont cela fonctionne dans Firebug ( discontinued ), sous l'onglet html-> layout.

À titre d'exemple, une div avec une largeur et une hauteur de 10px et une bordure de 1px aura une largeur et une hauteur extérieures de 12px.

Dans votre cas, vous pouvez réduire la largeur et la hauteur de l'élément en doublant la taille de votre bordure, ou bien faire de même pour que la bordure apparaisse comme si la bordure se trouve à l'intérieur de la div. les éléments rembourrés.

Par exemple:

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

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}
48
Sean Amos

Ceci est également utile dans ce scénario. il vous permet de définir des bordures sans changer la largeur de 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+ */
}

Tiré de http://css-tricks.com/box-sizing/

91
ejfrancis

définissez une bordure avant de cliquer pour avoir la même couleur que l’arrière-plan.

Ensuite, lorsque vous cliquez simplement sur changer la couleur de fond et la largeur ne changera pas.

41
corymathews

Une autre bonne solution consiste à utiliser outline au lieu de border. Il ajoute une bordure sans affecter le modèle de boîte. Cela fonctionne sur IE8 +, Chrome, Firefox, Opera, Safari.

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

36
chowey

Essayez de changer border en outline:

outline: 1px solid black;
28
panwp

Ayant utilisé beaucoup de ces solutions, je trouve que l’astuce de régler border-color: transparent être le plus flexible et le plus largement supporté:

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

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

Pourquoi c'est mieux:

  • Pas besoin de coder en dur la largeur de l'élément
  • Excellente prise en charge multi-navigateurs (IE6 manquant seulement)
  • Contrairement à outline, vous pouvez toujours spécifier séparément, par exemple, les bordures supérieure et inférieure.
  • Contrairement à la définition de la couleur de la bordure pour l'arrière-plan, vous n'avez pas besoin de la mettre à jour si vous modifiez l'arrière-plan, qui est compatible avec les arrière-plans colorés non uniformes.
24
Edward Newell

Essaye ça

box-sizing: border-box;
18
Hoang Trung

J'utilise habituellement un rembourrage pour résoudre ce problème. Le rembourrage sera ajouté lorsque la bordure disparaît et supprimé lorsque la bordure apparaît. Exemple de code:

.good-border {
  padding: 1px;
}

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

enter image description here

Voir mon exemple complet de code sur JSFiddle: https://jsfiddle.net/3t7vyebt/4/

13
Tho

Il suffit de diminuer la largeur et la hauteur du double de la largeur de la bordure

6
Sadat

Essayez de réduire la taille de la marge lorsque vous augmentez la bordure

2
arun

J'avais besoin de pouvoir "délimiter" n'importe quel élément en ajoutant une classe et ne pas affecter ses dimensions. Une bonne solution pour moi était d'utiliser Box-Shadow. Mais dans certains cas, l'effet n'était pas visible en raison de la fratrie. J'ai donc combiné à la fois l'ombre de boîte typique et l'ombre de boîte incrustée. Le résultat est un aspect de bordure sans changer aucune dimension.

Valeurs séparées par une virgule. Voici un exemple simple:

.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

Ajustez pour votre look préféré et vous êtes prêt à partir!

2
Chris

Parfois, vous ne voulez pas que la hauteur ou la largeur soient affectées sans le configurer explicitement. Dans ce cas, j'estime utile d'utiliser des pseudo-éléments.

.border-me {
    position: relative;
}

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

Vous pouvez également faire beaucoup plus avec le pseudo-élément, ce qui en fait un motif assez puissant.

2
Jack Guy

Vous pouvez faire des choses fantaisistes avec des ombres incrustées. Exemple pour mettre une bordure au bas d'un élément sans changer sa taille:

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

Vous pouvez créer l'élément avec une bordure avec la même couleur d'arrière-plan. Ensuite, lorsque vous souhaitez afficher la bordure, il suffit de changer sa couleur.

1
Matt Karatilovly
.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
1
peevo

Nous pouvons également utiliser la fonction css calc ()

width: calc(100% - 2px);

soustraire 2px pour les bordures

1
Rajeev Singh

Si le contenu de votre div est rendu de manière dynamique et que vous souhaitez définir sa hauteur, vous pouvez utiliser une astuce simple avec outline:

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

button:hover {
    outline-color: transparent;
}

Exemple ici: https://codepen.io/Happysk/pen/zeQzaZ

0
Matúš Šťastný