Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Qué tal  , mi consulta aquí es respecto a un cierto contenido tratado en susodicha clase: CU01036D. Habla sobre el cálculo del ancho total, y es aquí donde quiero detenerme:


/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
 background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
 410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
 width:65px; float:left; height:200px; }
/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
 -65 px contenido caja 4 obtenemos 198 px*/
#caja3{ margin:0 7px 7px 0px; border-color:green;
 width:198px; float: left; height: 300px;}
#caja4{ margin:0; border-color:orange; float: left; width:65px; height:200px;}
.limpiador {clear:both; padding:0; border-style:none; }


En este código se trata de explicar el cálculo del ancho del contenido y el total. Sin embargo, creo que no se logra entender bien la idea, ya que no está bien detallado el procedimiento del "cómo llegar a tal cifra"

Si alguien en este foro fuese tan amable de explicarme paso a paso qué significa cada línea de comentario, con sus respectivos detalles, por ejemplo:

/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
 -65 px contenido caja 4 obtenemos 198 px*/


• ¿De dónde salen esos 42?
• ¿de qué elementos estamos hablando?
• ¿Esta sumando los paddings de los otros elementos y luego se los resta?

De ante mano chicos, muchas gracias, es que realmente me dejó plop la explicación en los comentarios del código.