Padding y width

Cuando añadimos un padding a una capa con un width definido expresamente, ambas medidas se sumarán y probablemente haya que restar lo que hemos añadido de padding al width para que la maquetación nos quede correcta.

Sin embargo, si la capa no tiene un width asignado expresamente, el display:block hará que el ancho de la capa sea el ancho de la capa que la contiene, y esta medida no aumentará al añadir el padding.

Por otra parte, utilizando el estilo box-sizing: border-box; ya no será necesario sustraer el padding del width o del height según corresponda.

<style type="text/css">
	div	{
		width: 300px;
		padding: 40px
	}
	.box1{
		background: green
	}	
	.box2{
		background: red;
		box-sizing:border-box;
	}
</style>

<div class="box1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
</div>

<div class="box2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
</div>