html - poner - 100% de ancho menos margen y relleno
margenes en html sin css (5)
He estado buscando por todos lados pero no puedo encontrar una solución que se aplique a mi propio problema.
Estoy trabajando en un sitio web móvil y necesito que los cuadros de entrada tengan un ancho del 100% de la pantalla. Pero tengo padding-left: 16px y margin: 5px que hace que las cajas salgan de la pantalla, así que tengo que desplazarme hacia la derecha para ver el final de la caja. ¿Cómo hago las cajas 100% menos el relleno y el margen?
Para probarlo: http://jsfiddle.net/wuSDh/
Los elementos de nivel de bloque naturalmente llenan sus elementos primarios, sin embargo, si establece el ancho específicamente, anulará este comportamiento, permitiendo que el margen y el borde se agreguen al ancho especificado. Usted especifica el 100% de ancho en el cuerpo, lo que le da la oportunidad de desbordar el documento horizontalmente si hay un elemento renderizado en su borde interior derecho.
Ejemplo : http://jsfiddle.net/trex005/6earf674/
El remedio simple para esto es dejar de declarar el ancho del cuerpo. Si por alguna razón esto es necesario, puede establecer el margen en 0; El mismo principio se aplica a la entrada, pero es un poco más complicado. Las entradas (texto / contraseña) y áreas de texto, incluso cuando se configuran para mostrarse como bloque, derivarán sus anchos de tamaño y columnas, respectivamente. Esto puede anularse especificando un ancho en CSS, sin embargo, también tienen bordes y márgenes especificados por el usuario, por lo que tiene el problema de desbordamiento nuevamente. Para corregir este desbordamiento, debe configurar la pantalla de entrada para bloquear y su tamaño de caja: cuadro de borde. El cuadro de borde calculará los bordes y el relleno como parte del ancho.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Una vez que lo haga, notará que hay un espacio adicional entre los elementos. Esto se debe a que el bloque display: fuerza el salto de línea y las etiquetas <br> que agregó son redundantes. Quítalos, y ya estás en el negocio!
Demostración: http://jsfiddle.net/trex005/6earf674/1/
Otra solución es posicionar el valor absoluto de INPUT y agregar apoyos a la izquierda / derecha:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
Deberá ajustar los márgenes, etc., ya que estarán fuera del flujo de diseño relativo. También puede agregar relleno sin problemas, ya que no estableció un ancho fijo.
Esta técnica es ampliamente compatible en todos los navegadores.
Demostración: http://jsfiddle.net/wuSDh/3/
Puede ajustar el ancho de su cuadro de texto del 100% al 95%. Ahora se ve bien
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
Vea esto: http://jsfiddle.net/wuSDh/
Puedes usar calc , los navegadores modernos lo admiten y IE9 + también.
div {
position: absolute;
height: 20px;
width: calc(50% - 10px);
padding: 5px;
}
Suelte el width:100%; luego simplemente usa todo el relleno que quieras:
#login_box {
padding:10px;
margin:50px;
}
Demostración http://jsfiddle.net/PFm3h/
Efecto aislado
Demostración http://jsbin.com/ozazat/1/edit
Un montón de relleno, un montón de margen, no hay problema en absoluto.