Cuando se agrega un borde de 1 px a div, el tamaño de Div aumenta, no quiero hacer eso

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

Explicación detallada desordenada En
realidad, estoy agregando DIV con flotante: izquierda (mismo tamaño, como iconos) a un contenedor-div, por lo que todos se apilan uno tras otro, y cuando (el ancho del contenedor-div es 300px) no queda espacio en ancho por lo que los DIV secundarios aparecen en la siguiente fila, por lo que es similar al catálogo, pero debido a que el tamaño del DIV seleccionado solo aumenta, el DIV debajo del DIV seleccionado va a la derecha y crea un espacio vacío debajo del DIV seleccionado.

EDITAR:
disminución de la altura / anchura en la selección, pero cómo aumentarla nuevamente. Usando un marco de terceros, así que no tenga eventos cuando DIV pierda la selección.

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

Solo como ejemplo, un div con un ancho y una altura de 10px y un borde de 1px, tendrá un ancho y una altura externos 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 de su borde, o puede hacer lo mismo para Los elementos acolchados.

P.ej:

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

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

Esto también es útil en este escenario. le permite establecer bordes sin cambiar el ancho 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/

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

Luego, cuando haga clic, simplemente cambie el color de fondo y el ancho no cambiará.

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

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

Intenta cambiar bordera outline:

outline: 1px solid black;

Después de haber usado muchas de estas soluciones, creo que usar el truco de configuración border-color: transparentes 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 entre navegadores (solo se perdió IE6)
• A diferencia de outline, aún puede especificar, por ejemplo, los bordes superior e inferior por separado
• A diferencia de establecer que el color del borde sea el del fondo, no necesita actualizarlo si cambia el fondo, y es compatible con fondos de colores no sólidos.

Prueba esto

box-sizing: border-box;

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

.good-border {
  padding: 1px;
}

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

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

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

Puedes hacer algunas cosas elegantes 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;
}

A veces no desea que la altura o el ancho se vean afectados sin establecer explícitamente tampoco. En ese caso, encuentro ú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;
}

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

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

Necesitaba poder "bordear" cualquier elemento agregando 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 típica sombra de caja como la inserción de sombra de caja. El resultado es un aspecto de borde sin cambiar ninguna dimensión.

Valores separados por comas. 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ústalo a tu look preferido y listo!

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

width: calc(100% - 2px);

restando 2px para bordes

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

Puede crear el elemento con borde con el mismo color de fondo, luego, cuando desee que se muestre el borde, simplemente cambie su color.

En caso de que el contenido de tu divse muestre dinámicamente y quieras establecer su altura, puedes usar un simple truco con outline:

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

button:hover {
    outline-color: transparent;
}

Ejemplo aquí: https://codepen.io/Happysk/pen/zeQzaZ

Puedes probar un recuadro sombreado

algo como esto: box-shadow: inserto 0px -5px 0px 0px #fff

agrega un borde blanco de 5px a la parte inferior del elemento sin aumentar el tamaño