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


128

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.


Respuestas:


49

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 */
}

gracias, tenía la clase .dragdrop-selected pero fue utilizada por todos los objetos dibujables y tenía 3 tamaños diferentes (3 tipos diferentes) de objeto Dragable, así que seguí rellenando el mismo en los 3 Y configuré el relleno en .dragdrop-selected. . & funcionó. :)
Nachiket

Esta no es una buena solución para diseños receptivos. Usar outlineo un borde con el mismo color que el fondo (y cambiar su color a otro cuando se selecciona) es más flexible.
AliBZ

1
Pero suponga que necesita evitar codificar el ancho, para permitir que el elemento fluya o responda al ancho del puerto de vista: vea mi respuesta usandoborder-color: transparent
Edward Newell

No es necesario realizar estos cálculos, solo establezca el tamaño de la caja en border-box. Vea la respuesta de ejfrancis a continuación , y vea este artículo .
jbyrd

¿Estás seguro sobre el td en las tablas? En Chrome todavía parece aumentar el tamaño.
Protector uno

105

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/


44
tamaño de la caja: border-box realmente debe establecerse en todo como una mejor práctica moderna. Ver paulirish.com/2012/box-sizing-border-box-ftw
jbyrd

66
Esto no parece funcionar en algunos casos; No estoy seguro de por qué. Ver: codepen.io/anon/pen/QZaBQG
Wilson Biggs

51

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á.


3
¡Ingenioso! Ojalá lo hubiera pensado yo mismo.
Rijul Gupta

9
Sí, pero si no tienes un fondo de color sólido? Ver mi respuesta usandoborder-color: transparent
Edward Newell

44

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 )


Es genial, pero en comparación con el borde, no hay "contorno izquierdo, ...", no para mi caso.
Imskull

2
Entonces recomiendo usar box-shadowpor mi otra respuesta en una pregunta similar. No tiene el mismo soporte de navegador, pero eso es un problema menor en estos días.
chowey

Gracias #chowey, me acabo de dar cuenta de que también box-shadowpuede soportar un borde lateral, una solución perfecta.
Imskull

border-color: transparenttiene una mejor compatibilidad entre navegadores --- mira mi respuesta ...
Edward Newell

1
Este comentario está infravalorado. ¡Es una excelente manera de obtener un borde alrededor de un elemento sin cambiar su tamaño!
Sebastian Nemeth


28

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.

1
Encontré que esto funciona mejor con elementos de tamaño dinámico en mi UX. Detuve el cambio de tamaño que sucede en Moouse Over por completo. Gracias señor Newell!
d3r3kk

Genial. ¡Gracias!
Harald Hoerwick el

¡Ese es!
mientras es cierto

transparentesta es la necesidad!
dimpiax

Esto es lo que necesito (Y)
HaxxanRaxa

20

Prueba esto

box-sizing: border-box;

44
Esta debería ser la respuesta, muy simple.
Pasa el

¿Por qué esto no funciona en todas partes? Por ejemplo, codepen.io/anon/pen/QZaBQG
Tom

hola @Tom, no estoy seguro de por qué todavía no funciona. Pero en su caso, considere eliminar la altura en el contenedor y use relleno en su lugar. Puede resolver tu problema.
Hoang Trung

17

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

ingrese la descripción de la imagen aquí

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


1
¿Puede decirme qué está sucediendo realmente? Estoy confundido, ¿por qué en el borde malo se desplaza aquí cuando se desplaza hacia abajo?
Suraj Jain

@SurajJain Debido a que el tamaño del div "borde malo" cambiará (agregue 1px de borde) cuando pase el cursor sobre él.
Tho

6

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


3

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

3

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.


1
Tenía un borde de 1px que quería cambiar a 2px, y la única forma en que pude hacerlo fue eliminando widthy heighty agregando una propiedad bottomy leftademás de topy left, todo lo cual debería establecerse en el ancho opuesto de El borde original (en mi caso -1px). Gran truco sin embargo
Chase Sandmann

2

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


2

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!


2

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

width: calc(100% - 2px);

restando 2px para bordes


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

1
Creo que sería más útil para el OP y otros visitantes, cuando agregas alguna explicación para tu intención.
Reportero

1

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


1
Sí, pero supongamos que su fondo no es un color sólido ... ver a mi respuesta basa en el usoborder-color: transparent
Edward Newell

O todos juntos comoul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
stackunderflow

0

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


Desafortunadamente, el contorno no tiene esquinas redondeadas :(
M3RS

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.