Ακύρωση της επέκτασης στοιχείων στο CSS
Συνήθως, η επέκταση που περιγράφηκε στα προηγούμενα μαθήματα είναι επιβλαβής
και θα θέλατε να την απαλλαγείτε. Για
αυτό, το CSS έχει την ιδιότητα box-sizing.
Εάν ορίσετε την τιμή border-box,
τότε ούτε το padding ούτε το border θα
επεκτείνουν το μπλοκ:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* ορίζουμε τα paddings */
border: 10px solid green; /* ορίζουμε το border */
box-sizing: border-box; /* αφαιρούμε την επέκταση */
}
:
Δοκιμάστε μόνοι σας την περιγραφόμενη ιδιότητα
box-sizing.
