CSS3 - Veličina box-sa (Box Sizing)

Redefinisanje širine box-sa

Prema zadanim postavkama, stvarna širina ili visina okvira elementa vidljivog / prikazanog na web stranici zavisi o njegovoj širini ili visini, popunjenosti i svojstvu bordera. Na primjer, ako primijenite malo popunjavanja i bordera na element <div> sa 100% širine, pojaviće se vodoravna traka za pomicanje, kao što možete vidjeti u sljedećem primjeru. 

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer difoltnog CSS Box modela</title>
<style> 
.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
    background: #fad3d3;
} 
</style>
</head>
<body>
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
        metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum 
        id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
        varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
        vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
        aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
        eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
        interdum neque porttitor. Integer faucibus ligula.</p>

        <p>Quis quam ut magna consequat faucibus. Pellentesque 
        eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
        Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
        Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
        auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
        vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
        quam tortor, commodo ac dui quis, bibendum viverra erat. 
        Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
        Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>
    <p><strong>Napomena</strong>, primjerite klizač na dnu okvira za prikaz.</p>
</body>
</html>

Ovo je vrlo čest problem s kojim se web dizajneri već dugo suočavaju. Ali, CSS3 uvodi svojstvo veličine box-sa kako bi riješio ovaj problem i učinio CSS raspored mnogo jednostavnijim i intuitivnijim. Svojstvo veličine okvira mijenja zadani model CSS okvira na takav način da se bilo koji dodatak ili border naveden na elementu položi i povuče unutar područja sadržaja, tako da su prikazane širina i visina elementa jednaki specifikovanom CSS svojstva širine i visine. 

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
    box-sizing: border-box;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Efekat CSS Box-Sizing svojstva na difoltnom Box modelu</title>
<style> 
.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
    background: #fad3d3;
    box-sizing: border-box;
} 
</style>
</head>
<body>
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
        metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
        id metus ac nisl bibendum scelerisque non non purus. Suspendisse
        varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
        vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
        aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
        eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
        interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque 
        eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
        Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
        Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
        auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
        vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
        quam tortor, commodo ac dui quis, bibendum viverra erat. 
        Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
        Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>
</body>
</html>

Ako vidite izlaz ovog primjera, vidjećete da je traka za pomicanje nestala.


Kreiranja rasporeda s dimenzijama okvira

Pomoću CSS svojstva box-sizing kreiranje rasporeda višestrukih kolona koristeći postotke. Sada ne morate brinuti o konačnoj veličini okvira elementa dok dodajete padding ili border na njih. Sljedeći primjer će stvoriti raspored s dve kolone gdje svaka kolona ima jednaku širinu i postavljaju se uporedo pomoću svojstva float. 

.box {
    width: 50%;
    padding: 20px;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS izgleda više kolona pomoću Box-Sizing</title>
<style> 
.box {
    width: 50%;
    padding: 20px;
    background: #f0e68c;
    float: left;
    box-sizing: border-box;
}
.left-side{
    width: 48%;
    margin-right: 2%; 
}
.right-side{
    width: 48%;
    margin-left: 2%; 
}
/* Da biste popravili sažimanje roditelja - za detalje pogledajte lekciju „CSS3 Alignment“ */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
</style>
</head>
<body>
    <h2>Dve jednake kolone</h2>
    <div class="clearfix">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
            metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse
            varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
            vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
            interdum neque porttitor.</p>
        </div>
        <div class="box">
            <p>Quis quam ut magna consequat faucibus. Pellentesque 
            eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
            Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
            Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
            auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
            vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
            quam tortor, commodo ac dui quis, bibendum viverra erat. 
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
            Curabitur et diam tristique, accumsan nunc eu.</p>
        </div>
    </div>
    <br>
    <h2>Dve jednake kolone s marginom između</h2>
    <div class="clearfix">
        <div class="box left-side">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
            metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum 
            vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
            interdum neque porttitor.</p>
        </div>
        <div class="box right-side">
            <p>Quis quam ut magna consequat faucibus. Pellentesque 
            eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
            Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
            Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
            auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
            vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
            quam tortor, commodo ac dui quis, bibendum viverra erat. 
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
            Curabitur et diam tristique, accumsan nunc eu.</p>
        </div>
    </div>
</body>
</html>

Slično tome, ovom jednostavnom tehnikom kreirate složenije rasporede. 

.box {
    width: 30%;
    padding: 20px;
    margin-left: 5%;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}
.box:first-child {
    margin-left: 0;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS izgleda više kolona pomoću Box-Sizing</title>
<style> 
.box {
    width: 30%;
    padding: 20px;
    margin-left: 5%;
    background: #f0e68c;
    float: left;
    box-sizing: border-box;
}
.box:first-child {
    margin-left: 0;
}
/* Da biste popravili sažimanje roditelja - za detalje pogledajte lekciju„CSS3 Alignment“ */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
</style>
</head>
<body>
    <h2>Tri jednake kolone s marginom između</h2>
    <div class="clearfix">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
            metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum 
            vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
            interdum neque porttitor. Integer faucibus ligula.</p>
        </div>
        <div class="box">
            <p>Quis quam ut magna consequat faucibus. Pellentesque 
            eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
            Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
            Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
            auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
            vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
            quam tortor, commodo ac dui quis, bibendum viverra erat. 
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
        </div>
        <div class="box">
            <p>Facilisis orci, dignissim tortor vitae, ultrices mi. Vestibulum
            a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. 
            Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed 
            luctus metus id mi gravida, faucibus convallis neque pretium. 
            Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. 
            Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices 
            nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra 
            tellus. Phasellus sodales libero nec dui convallis, sit amet 
            fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci.</p>
        </div>
    </div>
</body>
</html>