¿deberían las fronteras afectar el diseño?

Question

El uso de un diseño básico como ...

<div class="span-23 last" id="main"> 
    <div class="span-18" id="column1"> 
     <div class="clear span-10" id="body1"> </div> 
     <div class="span-6 prepend-1 append-1" id="body2"> </div> 
    </div> 
    <div class="span-5 last" id="column2"> </div> 
</div> 

Cuando defino un borde en cualquiera de los divs que o bien no aparecen o no se mueven alrededor de los elementos de la página. Entonces, ¿las fronteras realmente toman un conteo de px fuera de un div? Si es así, ¿cómo puedo evitar esto?

He visto algunas menciones usando position:relative;, pero ese no es el problema aquí, ya que lo uso de forma extensiva.

Answer 1

Sí, las fronteras ocupan espacio físico. Por lo tanto, si configura un div para que sea 100%, entonces déle un borde de 1px, será 2px más ancho que el contenedor en el que se encuentra.

Para evitarlo, puede decidir no establecer un ancho en absoluto (o 'auto') para que se ajuste automáticamente a la cuenta de relleno y bordes.

Como alternativa, puede anidar elementos, dando a un div externo un ancho específico, luego un borde interior al borde.

También hay otras opciones.

Adición:

Ah, parece que está utilizando blueprint.css

Blueprint.css es no diseñado para manejar añadiendo bordes de los contenedores de diseño. Esto romperá la grilla.

He modificado blueprint.css en el pasado para acomodar esto.Normalmente voy a añadir algunas clases únicas que se pueden aplicar para abarcar-x divs:

.span-border {border: 1px solid black;} 
.span-8.span-border {margin-left: -1px; margin-right: 9px;} 

Lo anterior se basa en una 10px 'saco' entre las columnas. Lo que debes hacer es reducir el margen a cada lado de un tramo x que tiene un borde aplicado para acomodar el espacio que ocupa el borde.

Answer 2

Simplemente no especifique el ancho de ninguno de sus elementos de nivel de bloque. Entonces las fronteras serán contabilizadas.

Answer 3

El borde se cuenta en todo el ancho y la altura del elemento.
Para evitarlo, use outline.

.element{ 
    outline: 1px solid black; 
} 

Answer 4

El modelo de caja CSS define border y padding a estar fuera del width y height, es decir, width y height indique el tamaño del área de contenido solamente, y no incluyen border o padding.

El viejo IE modelo de caja, por cierto, que es lo que hay en el IE < 6, y el modo de peculiaridades, incluidos border y padding en el width y height. outline es algo así como border pero no aumenta el tamaño del elemento.

Answer 5

fronteras asumir píxeles fuera del elemento real ... así que, si tienes un div de width: 20px y border: 1px, el ancho es 22px. Una forma de evitarlo es tener un contenedor con su ancho especificado, luego tener un div interno sin ancho especificado y el borde.

Aquí se muestra un ejemplo: http://jsfiddle.net/pWB9U/

Answer 6

¿Deberían las fronteras afectar el diseño? Nº Peter Paul Koch said it best at quirksmode.org, (quoting himself):

Lógicamente, una caja se mide de frontera a frontera. Toma una caja física, cualquier caja. Pon algo en él que sea claramente más pequeño que la caja. Pida a cualquiera que mida el ancho de la caja. Él medirá la distancia entre los lados de la caja (los 'bordes'). Nadie pensará en medir el contenido de la caja.

Los diseñadores web que crean cuadros para mantener el contenido se preocupan por el ancho visible de, aproximadamente la distancia desde el borde hasta el borde. Los bordes, y no el contenido, son las señales visuales para el usuario del sitio. A nadie le interesa el ancho del contenido.

Pero do borders affect layout? Tristemente, la respuesta es sí. Considere esto div:

.foo { 
    width: 500px; 
    padding: 5px; 
    border: 1px solid blue; 
} 

Esta div realidad será 512px de ancho, porque width define la anchura de los contenidos, no el div. Tienes que agregar relleno y borde para obtener el ancho real.

Editar: Para corregir esta locura utilizar box-sizing:

.foo { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; /* FireFox requires the -moz- prefix */ 
    width: 500px; 
    padding: 5px; 
    border: 1px solid blue; 
} 

Esta div habrá 500 píxeles de ancho, incluso con el relleno y la frontera.

Demo at jsFiddle

^{No funciona en IE7 (que tiene una cuota de mercado inferior al 1%).}