Lorsqu'une bordure de 1 px est ajoutée à div, la taille de la div augmente, je ne veux pas faire ça


128

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

Explication détaillée
désordonnée En fait, j'ajoute des DIV avec float: left (même taille, comme les icônes) à un conteneur-div, donc tout s'empile les uns après les autres, et quand (la largeur du conteneur-div est de 300px) il n'y a pas d'espace laissé dans le sens de la largeur, donc Les DIV enfants viennent dans la ligne suivante, donc c'est comme le catalogue, mais à cause de la bordure seule la taille DIV sélectionnée est augmentée, DIV sous DIV sélectionné va à droite et crée un espace vide sous DIV sélectionné.

EDIT:
Diminuer la hauteur / largeur sur la sélection, mais comment l'augmenter en arrière. En utilisant un framework tiers, donc ne pas avoir d'événement lorsque DIV perd la sélection.


Réponses:


49

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

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

Pour votre cas, pour donner l'impression que la bordure est à "l'intérieur" du div, dans la classe CSS sélectionnée, vous pouvez réduire la largeur et la hauteur de l'élément en doublant la taille de votre bordure, ou vous pouvez faire de même pour le rembourrage des éléments.

Par exemple:

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

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

thnx, j'avais une classe sélectionnée par .dragdrop mais elle était utilisée par tous les objets pouvant être déplacés et j'avais 3 tailles différentes (3 types différents) d'objet Dragable, donc j'ai gardé le rembourrage identique dans les 3 ET mis le remplissage dans .dragdrop-selected. . & ça a marché. :)
Nachiket

Ce n'est pas une bonne solution pour les conceptions réactives. Utiliser outlineou une bordure avec la même couleur que l'arrière-plan (et changer sa couleur en quelque chose d'autre lorsque est sélectionné) est plus flexible.
AliBZ

1
Mais supposons que vous ayez besoin d'éviter de coder en dur la largeur, de laisser l'élément couler ou de répondre à la largeur du port de vue: voir ma réponse en utilisantborder-color: transparent
Edward Newell

Pas besoin de ces calculs, définissez simplement le dimensionnement de la boîte sur border-box. Voir la réponse d'ejfrancis ci - dessous , et lire cet article .
jbyrd

Êtes-vous sûr du td dans les tableaux? Dans Chrome, cela semble encore augmenter la taille.
Protector one

105

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


4
box-sizing: border-box devrait vraiment être défini sur tout comme une meilleure pratique moderne. Voir paulirish.com/2012/box-sizing-border-box-ftw
jbyrd

6
Cela ne semble pas fonctionner dans certains cas; pas exactement pourquoi. Voir: codepen.io/anon/pen/QZaBQG
Wilson Biggs

51

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

Ensuite, lorsque vous cliquez, changez simplement la couleur d'arrière-plan et la largeur ne changera pas.


3
Ingénieux! j'aurais aimé y penser moi-même.
Rijul Gupta

9
Ouais, mais si vous n'avez pas de fond uni? Voir ma réponse en utilisantborder-color: transparent
Edward Newell

44

Une autre bonne solution consiste à utiliser à la outlineplace 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/2105930 )


C'est génial, mais en comparaison avec la bordure, il n'y a pas de "contour-gauche, ...", pas pour mon cas.
Imskull

2
Ensuite , je recommande d' utiliser box-shadowpar mon autre réponse sur une question similaire. Il n'a pas le même support de navigateur, mais c'est moins un problème de nos jours.
chowey

Merci #chowey, je viens de réaliser que box-shadowpeut également prendre en charge la bordure d'un côté, solution parfaite.
Imskull

border-color: transparenta un meilleur support multi-navigateurs --- voir ma réponse ...
Edward Newell

1
Ce commentaire est sous-évalué. C'est un excellent moyen d'obtenir une bordure autour d'un élément sans le redimensionner!
Sebastian Nemeth


28

Ayant utilisé plusieurs de ces solutions, je trouve que l'utilisation de l'astuce de réglage border-color: transparentest la plus flexible et la plus largement prise en charge:

.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
  • Excellent support multi-navigateurs (seul IE6 a manqué)
  • Contrairement à outline, vous pouvez toujours spécifier, par exemple, les bordures supérieure et inférieure séparément
  • Contrairement à la définition de la couleur de la bordure pour qu'elle soit celle de l'arrière-plan, vous n'avez pas besoin de la mettre à jour si vous changez l'arrière-plan, et elle est compatible avec les arrière-plans de couleur non unie.

1
J'ai trouvé que cela fonctionnait mieux avec des éléments de taille dynamique dans mon UX. Arrêt complet du changement de taille surMouseOver! Merci M. Newell!
d3r3kk

Génial. Merci!
Harald Hoerwick

C'est celui-là!
tandis que vrai le

transparentvoilà quel besoin!
dimpiax

C'est ce dont j'ai besoin (Y)
HaxxanRaxa

20

Essaye ça

box-sizing: border-box;

4
Cela devrait être la réponse, très simple.
Spets

Pourquoi cela ne fonctionne-t-il pas partout? Par exemple codepen.io/anon/pen/QZaBQG
Tom

salut @Tom, je ne sais pas pourquoi cela ne fonctionne pas encore. Mais dans votre cas, veuillez envisager de supprimer la hauteur du conteneur et d'utiliser un rembourrage à la place. Peut résoudre votre problème.
Hoang Trung

17

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

.good-border {
  padding: 1px;
}

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

entrez la description de l'image ici

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


1
Pouvez-vous me dire ce qui se passe réellement, je suis confus, pourquoi une mauvaise frontière plane-t-elle ici vers le bas lorsque vous la survolez?
Suraj Jain

@SurajJain Parce que la taille du div "bad border" sera modifiée (ajoutez 1px de bordure) lorsque vous survolez.
Jeu

6

Diminuez simplement la largeur et la hauteur du double de la largeur de la bordure


3

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;
}

3

Parfois, vous ne voulez pas que la hauteur ou la largeur soient affectées sans définir explicitement non plus. Dans ce cas, je trouve 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, c'est donc un modèle assez puissant.


1
J'avais une bordure 1px que je voulais changer en 2px, et le seul moyen que je pouvais trouver pour le faire était de supprimer widthet heightet d'ajouter une propriété bottomet leften plus de topet left, qui devraient tous être définis sur la largeur opposée de la bordure d'origine (dans mon cas -1px). Super hack cependant
Chase Sandmann

2

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


2

J'avais besoin de pouvoir "border" n'importe quel élément en ajoutant une classe et de 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 d'autres frères et sœurs. J'ai donc combiné à la fois une ombre de boîte typique et une ombre de boîte encastrée. Le résultat est un aspect de bordure sans changer les dimensions.

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 votre look préféré et vous êtes prêt à partir!


2

Nous pouvons également utiliser la fonction css calc ()

width: calc(100% - 2px);

soustraction de 2 pixels pour les bordures


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

1
Je pense que ce serait plus utile pour le PO et les autres visiteurs, lorsque vous ajoutez des explications à votre intention.
Reporter

1

Vous pouvez créer l'élément avec une bordure de la même couleur que votre arrière-plan, puis lorsque vous voulez que la bordure s'affiche, changez simplement sa couleur.


1
Ouais, mais supposons que votre arrière-plan ne soit pas une couleur unie ... voir ma réponse basée sur l'utilisationborder-color: transparent
Edward Newell

Ou tous ensemble commeul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
stackunderflow

0

divSi le contenu de votre est rendu dynamiquement 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


Le contour n'a malheureusement pas de coins arrondis :(
M3RS

0

Vous pouvez essayer un encadré d'ombre de boîte

quelque chose comme ceci: box-shadow: inset 0px -5px 0px 0px #fff

ajoute une bordure blanche de 5 pixels au bas de l'élément sans augmenter la taille

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.