borde interno css, diseño roto

He dividido la pantalla con muchos div para que se peguen unos a otros (digamos, algo así como un tablero de ajedrez, pero con campos de tamaños variables). Configuré heigth y width usando porcentajes (relativos al contenedor principal).borde interno css, diseño roto

Ahora, cuando agrego border: 1px a los divs, todos los saltos de diseño ... me imagino que la frontera 1px añade a cada lado, y la solución sería añadir un poco de borde interno. ¿Puedo agregar de alguna manera un borde interno?

Fuente

2011-07-19 Jakub M.

Puede usar box-sizing: border-box para hacer que el ancho del borde sea parte del width del elemento.

.example { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

Browser support.

Fuente

2011-07-19 16:46:11 thirtydot

/* Olvidó -ms para IE */ \t \t \t -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; tamaño de caja: border-box; –

@EmilioYero: No, no lo hice. Eche un vistazo al enlace de "soporte del navegador" al final de mi respuesta. IE7 no lo admite en absoluto, mientras que IE8 y superior lo admiten sin un prefijo de proveedor. – thirtydot

Utilice la propiedad del esquema. A diferencia de la propiedad de la frontera, no "agrega" a la altura o el ancho de los elementos. Sin embargo, a diferencia de la propendencia fronteriza, no puede tener propiedades individuales a la izquierda, derecha, abajo o a la izquierda. Aunque puede tener propiedades de estilo de contorno, ancho de perfil y color de contorno.

Outline Refrence

Fuente

2011-07-19 16:43:55 Jawad

¿Cómo funciona en todos los navegadores sin embargo? – Phil

@Phil: No estoy seguro, pero creo que la propiedad de esquema es bien soportada incluso en navegadores heredados. Estoy a punto de ser corregido. – Jawad

Compatibilidad con el navegador: http://reference.sitepoint.com/css/outline#compatibilitysection – thirtydot

puede disminuir los porcentajes en 0.5 haciéndolos 49.5% EDIT: principio no va a funcionar, gracias @thirty decir

Fuente

2011-07-19 16:44:41 Phil

'outset' no cambiará nada. – thirtydot

Vamos, si usted tiene un div padre y muchos divs niño. Cuando establece el alto y el ancho como porcentajes, conseguirá que se adhieran entre sí. Luego, al agregar border:1px, su ancho será más largo de lo que era antes. Para resolver esto, diría que debe tener another div after the parent div para evitar el cambio de ancho de ancho.

Fuente

2011-07-19 16:46:09

¡No tengo idea de cómo eso resolvería el problema! – Jawad

@Jawad: intente eliminar tanto 'relleno 'como' margen', luego envolvería todos los elementos secundarios secundarios juntos. –

Respuesta

Cuestiones relacionadas