AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Tamaño de caja css box-sizing: border-box


Next Page >>
HTML images

CSS Tutorial » box-sizing: border-box

¿Qué es y para qué sirve?.

La propiedad CSS de tamaño de caja box-sizing: border-box establece cómo se calcula el ancho y alto total de un elemento.

¿Qué hace la propiedad box-sizing?

La propiedad de CSS box-sizing indica cómo se deben calcular las medidas de un elemento. ¿Qué significa esto? Pues que si le añades un padding o un border el tamaño de renderizado de la caja será: width + padding + border y luego no encaja.

Sintaxis:

box-sizing: content-box | padding-box | border-box | initial | inherit

 

Este elemento verde tiene un ancho de 300px, un alto de 150px, borde rojo de 14px, solid, marjen amarillo de 10px y

centrado en el centro.
La caja div verde no encaja el la amarilla

 

Sin box-sizing: border-box; la propiedad de tamaño de caja de CSS

Por defecto, el ancho y alto de un elemento se calcula así:

ancho + relleno + borde = ancho real de un elemento
altura + relleno + borde = altura real de un elemento

Esto significa: cuando establece el ancho / alto de un elemento, el elemento a menudo aparece más grande de lo que ha establecido (porque el borde y el relleno del elemento se agregan al ancho / alto especificado del elemento).

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 2px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 30px;
border: 6px solid red;
}
</style>
</head>
<body>

<div class ="div1"> Este div es más pequeño (el ancho es 300px y el alto es 100px). </div>
<br /> <br />
<div class = "div2"> Este div es más grande (el ancho también es de 300 px y la altura es de 100 px). Este div es más grande (el ancho también es de 300 px y la altura es de 100 px). </div>

</body>
</html>

La propiedad de tamaño de caja resolverá este problema.

Etiquetas: tamaño de caja css box-sizing: border-box, tamaño de div css, tamaño de cajas en css, cambiar tamaño de div css, cambiar tamaño caja de texto css

 

Con la propiedad de tamaño de caja de CSS

La propiedad de tamaño de caja nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.

Si establece box-sizing: border-box; en un elemento, el relleno y el borde se incluyen en el ancho y el alto:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class ="div1"> ¡Ambos divs tienen el mismo tamaño ahora! </div>
<br>
<div class ="div2"> ¡Hurra! </div>
</body>
</html>

Nota:  Dado que el resultado de usar box-sizing: border-box; es mucho mejor, muchos desarrolladores quieren que todos los elementos de sus páginas funcionen de esta manera.

 

Aplicar box-sizing: border-box; a todos los elementos

El siguiente código garantiza que todos los elementos se dimensionen de esta manera más intuitiva.
Muchos navegadores ya utilizan box-sizing: border-box; para muchos elementos de formulario (pero no todos, razón por la cual las entradas y las áreas de texto se ven diferentes en el ancho: 100%;).
Aplicar esto a todos los elementos es seguro y prudente:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}

* {
box-sizing: border-box;
}

input, textarea {
width: 100%;
}
</style>
</head>
<body>

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p> <strong> Sugerencia: </strong> intente eliminar la propiedad de tamaño de caja del elemento de estilo y observe lo que sucede.
Tenga en cuenta que el ancho de la entrada, el área de texto y el botón de envío saldrán de la pantalla. </p>

</body>
</html>

 



Etiquetas: tamaño de caja css box-sizing: border-box, tamaño de div css, tamaño de cajas en css, cambiar tamaño de div css, cambiar tamaño caja de texto css
Tamaño de caja css box-sizing: border-box - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...