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

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.


CSS background color - opacity, gradient...
CSS flex - display: flex - CSS Flexbox L...
CSS border padding...
HTML text center horizontally and vertic...
HTML text input <input type="text"&g...
HTML link color...
How to Link CSS to HTML, external file n...
HTML link - hyperlink...
jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...