<div class="buttons">
<p class="intro">Clicca il bottone <code>border-box</code> per correggere questo layout grazie al potere del Box Sizing!</p>
<button id="content">content-box</button>
<button id="border">border-box</button>
</div>
<div class="parent">
<p>Elemento genitore con una larghezza del 50% e un bordo di 5px di colore verde.</p>
<div class="child">
<p>Elemento figlio con larghezza del 90%, 4px di bordo arancione e un padding al 20%.</p>
</div>
<div class="twins">
<p>Elemento figlio con larghezza del 50%, 4px di bordo arancione e un padding a 1em.</p>
</div>
<div class="twins">
<p>Elemento figlio con larghezza del 50%, 4px di bordo arancione e un padding a 1em.</p>
</div>
</div>
.parent {
width: 50%;
border: 5px solid #1ABC9C;
float: left;
}
.child {
width: 90%;
padding: 20%;
border: 4px solid #EF6C00;
margin: .5em auto;
}
.twins {
width: 50%;
padding: 1em;
border: 4px solid #EF6C00;
float: left;
}
/* styling for Pen, not related to box-sizing or layout */
body {
font-family: sans-serif;
font-size: 1.1em;
}
.buttons {
margin-bottom: .5em;
}
p:not(.intro) {
text-align: center;
}
View Compiled
$("#content").on("click", function() {
$("*").css("box-sizing", $(this).text());
});
$("#border").on("click", function() {
$("*").css("box-sizing", $(this).text());
});
This Pen doesn't use any external CSS resources.