css - pantalla - Cuando se agrega 1 borde de px a div, el tamaño de Div aumenta, no quiere hacer eso

evitar que un div se baje

Question

Al hacer clic, agrego, 1px borde a div, por lo que el tamaño de Div aumenta en 2px X 2px. No quiero aumentar el tamaño de div. ¿Hay alguna manera simple de hacerlo?

Desordenada explicación detallada
En realidad estoy agregando DIVs con float: left (mismo tamaño, como íconos) a un contenedor-div, así que todos se acumulan uno después de otro, y cuando (el ancho del contenedor-div es 300px) no queda espacio para el ancho así que viene DIVs para niños en la fila siguiente, por lo que es similar al catálogo, pero debido al borde solo se aumenta el tamaño DIV seleccionado, DIV bajo DIV seleccionado va a la derecha y crea espacio vacío debajo del DIV seleccionado.

EDITAR:
Disminución de la altura / ancho en la selección, pero cómo aumentarla de nuevo. Usando un marco de terceros, entonces no tiene evento cuando DIV pierde la selección.

Answer 1

A veces no quiere que la altura o el ancho se vean afectados sin establecerlo explícitamente. En ese caso, me parece útil usar pseudoelementos.

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

También puede hacer mucho más con el pseudo elemento, por lo que este es un patrón bastante poderoso.

Answer 2

Habiendo utilizado muchas de estas soluciones, me parece que usar el truco de establecer border-color: transparent para ser el más flexible y ampliamente compatible:

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

Por qué es mejor:

• No es necesario codificar el ancho del elemento
• Gran compatibilidad con navegadores cruzados (solo IE6 se perdió)
• A diferencia del outline , aún puede especificar, por ejemplo, bordes superiores e inferiores por separado
• A diferencia de configurar el color del borde para que sea el del fondo, no necesita actualizarlo si cambia el fondo, y es compatible con fondos de colores no sólidos.

Answer 3

Intente disminuir el tamaño del margen cuando aumenta el borde

Answer 4

La propiedad border css aumentará todos los elementos de tamaño "externo", excepto los tds en las tablas. Puede obtener una idea visual de cómo funciona esto en Firebug, en la pestaña html-> layout.

Solo como ejemplo, un div con un ancho y una altura de 10px y un borde de 1px, tendrá un ancho y una altura exteriores de 12px.

Para su caso, para que parezca que el borde está en el "interior" del div, en la clase CSS seleccionada, puede reducir el ancho y la altura del elemento duplicando el tamaño del borde, o puede hacer lo mismo para los elementos de relleno.

P.ej:

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

Answer 5

Necesitaba poder "bordear" cualquier elemento al agregar una clase y no afectar sus dimensiones. Una buena solución para mí fue usar Box-shadow. Pero en algunos casos el efecto no fue visible debido a otros hermanos. Así que combiné tanto la sombra de caja típica como la sombra de caja insertada. El resultado es un aspecto de borde sin cambiar ninguna dimensión.

Valores separados por coma Aquí hay un ejemplo 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

Ajústelo para su aspecto preferido y listo.

Answer 6

Otra buena solución es usar el outline lugar del border . Agrega un borde sin afectar el modelo de caja. Esto funciona en IE8 +, Chrome, Firefox, Opera, Safari.

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

Answer 7

Prueba esto

box-sizing: border-box;

Answer 8

Pruebe cambiar el borde al contorno.

contorno: 1px negro sólido;

Answer 9

Puedes crear el elemento con borde con el mismo color de fondo, luego cuando quieras que se muestre el borde, simplemente cambia su color.

Answer 10

Puedes hacer algunas cosas sofisticadas con sombras insertadas. Ejemplo para poner un borde en la parte inferior de un elemento sin cambiar su tamaño:

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

Answer 11

Simplemente disminuya el ancho y la altura por el doble del ancho del borde

Answer 12

También podemos usar la función css calc ()

width: calc(100% - 2px);

restando 2px para las fronteras

Answer 13

Usualmente uso relleno para resolver este problema. El relleno se agregará cuando el borde desaparezca y se elimine cuando aparezca el borde. Código de muestra:

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

Ver el código de muestra completo en JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Answer 14

establece un borde antes de hacer clic para que sea del mismo color que el fondo.

Luego, cuando haces clic, simplemente cambias el color de fondo y el ancho no cambiará.

Answer 15

esto también es útil en este escenario. te permite establecer bordes sin cambiar el ancho 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+ */
}

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

Answer 16

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