Καλησπέρα σας!!!!!!!Ύστερα από μία εβδομάδα επιστρέφουμε και πάλι δυναμικά με σκοπό να σας δώσουμε πολλά,όμορφα και πολύ αναλυτικά tutorials .Η αλήθεια είναι ότι μας λείψατε πολύ!Το σημερινό μας tutorial έχει να κάνει με ένα θέμα στα CSS το οποίο πολλές φορές γίνεται αιτία μπερδέματος.Θα μιλήσουμε για το margin και το padding και το box-model στα CSS.Αν όλα αυτά σας φαίνονται δύσκολα και μπερδεμένα,ας ξεκινήσουμε σιγά σιγά το σημερινό tutorial 
και θα τα διαλευκάνουμε όλα!Αν θέλετε μπορείτε να ρίξετε μία ματιά σε αυτό το CSS tutorial σε περίπτωση που δεν γνωρίζετε σχετικά με τα CSS.
Τι είναι το box model στα CSS και γιατί πρέπει να το ξέρω;;
Είναι πολύ σημαντικό να γνωρίζετε ότι στα CSS όλα τα html στοιχεία θεωρούνται σαν να είναι τετράγωνα κουτιά.Δηλαδή μία εικόνα,μία παράγραφος, μία ενότητα(div) θεωρούνται ότι έχουν σχήμα κουτιού.Ας δούμε μία εικόνα :
Στην παραπάνω εικόνα διαπιστώνουμε και οπτικά αυτό που είπαμε παραπάνω.Βλέπουμε ότι έχουμε μια div η οποία περιέχει μία παράγραφο και μέσα στην παράγραφο υπάρχει μία εικόνα.Όλα αυτά τα html στοιχεία “συμπεριφέρονται” σαν κουτιά.Φυσικά μιλάμε για ένα νοητό κουτί το οποίο περιέχει το κάθε ένα html στοιχείο.Άρα γνωρίζοντας εμείς το box model , μπορούμε να τοποθετούμε το κάθε html στοιχείο μέσα σε μία σελίδα όπου θέλουμε σε σχέση με τα υπόλοιπα html στοιχεία.
To box model.Margin,padding,border.
Στο τέλος του css tutorial θα δούμε μία οπτική απεικόνιση του box model.Πρώτα όμως θα μιλήσουμε για 3 στοιχεία που έχουν όλα τα html elements στα CSS.
Το πρώτο που θα δούμε είναι το “border“
Όπως και τα κανονικά κουτιά έτσι και στα CSS τα html στοιχεία έχουν κάποια όρια τα οποία όρια κυκλώνουν τα στοιχεία αυτά.Για να το δούμε και οπτικά θα δημιουργήσουμε μία div και θα τις εφαρμόσουμε με css ένα border ,το οποίο θα την κυκλώσει, ώστε να δούμε τα όρια της και οπτικά.Το border αυτό θα είναι 5px πλάτος και χρώματος μαύρου.Ας δούμε τον κώδικα html και το css που θα εφαρμόσουμε.
<!--Δίνουμε ένα id για να το χρησιμοποιήσουμε με το CSS κώδικα --> <div id="borderDiv"> Με περικυκλώνει ένα μαύρο πλαίσιο! </div>
To css που θα εφαρμόσουμε ώστε να δούμε το πως λειτουργεί το border:
#borderDiv{
/*Ορίζω ένα πλάτος για την div μου.Δεν είναι υποχρεωτικό αυτό .*/
width:300px;
/*Εδώ δίνουμε 5px border το οποίο είναι τύπου solid και χρώματος μαύρου.*/
border:5px solid black;
}
Ας δούμε ένα στιγμιότυπο:
Βλέπετε που το κείμενο μας περικυκλώνεται από ένα μαύρο όριο;;;Αυτό ουσιαστικά είναι το border.Κάτι πολύ σημαντικό!!!!!
Ορίσαμε η div μας να έχει πλάτος 300px.Προσοχή.Όταν εφαρμόζουμε ένα border σε αυτή για παράδειγμα 5px τότε αυτά τα 5px προστίθενται και δεξιά και αριστερά και πάνω και κάτω…Δηλαδή πλέον η div μας έχει πλάτος 5px(border δεξί)+300px(μέγεθος div)+5px(border αριστερό)= 310px.
Επιπλέον παραδείγματα με css border.
Border μόνο σε συγκεκριμένες πλευρές.
Έστω ότι θέλω σε μια div να φαίνεται border μόνο από την κάτω και από την αριστερή πλευρά.Το CSS που θα εφαρμόσω (έστω ότι έχω μία div σαν την παραπάνω με id = “leftBottomBorder”):
#leftBottomBorder{
width:300px;
/*Πρέπει πάντα να δηλώνουμε πόσο παχύ θα είναι το border,τι στυλ θα είναι και τι χρώμα θα έχει!!!*/
border-left:4px solid green;
border-bottom:5px solid red;
}
Ας δούμε ένα στιγμιότυπο!!!
Border διαφορετικού στυλ
Όπως έχουμε δει στα παραπάνω CSS κομμάτια κώδικα ορίζουμε ότι το border μας θέλουμε να είναι τύπου “solid“.Υπάρχουν και άλλοι τύποι όπως για παράδειγμα :dotted,double,dashed.Ας εφαρμόσουμε CSS σε μία div με id = “diffstyleBorder” και να δούμε ένα στιγμιότυπο!
#diffstyleBorder{
width:300px;
border-left:4px dotted #7C6BDC;
border-bottom:5px double #804040;
border-top:3px solid green;
border-right: 7px dashed #FF8000;
}
Ας δούμε ένα στιγμιότυπο:
Είδατε λοιπόν πόσο εύκολο είναι να εφαρμόσουμε ένα border γύρω από τα html στοιχεία.Ας δούμε τώρα το δεύτερο και πολύ βασικό στοιχείο,το padding.
Το δεύτερο που θα δούμε είναι το “padding“
Το padding είναι το περιθώριο που δίνουμε από τη μέσα μεριά..Έστω λοιπόν ότι έχουμε μία παράγραφο πλάτους 400px,με border και θέλουμε τα γράμματα να έχουν απόσταση 10px από όλα τα borders.Ας δω λίγο τον html κώδικα,ένα στιγμιότυπο πριν την εφαρμογή του padding και ένα στιγμιότυπο μετά την εφαρμογή του padding.
<p id="paddingParagraph"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna erat, imperdiet eu eleifend et, porttitor eu tortor. Phasellus bibendum porta enim eu luctus. Sed venenatis facilisis tellus, vel porta ligula feugiat ut. In eleifend, tellus ut adipiscing ullamcorper, sapien diam tempor libero, id rutrum lectus velit eu purus. Quisque feugiat turpis sapien. Praesent malesuada quam quis nisl dictum vel luctus erat tempor. Nunc ut lectus eget elit commodo porttitor. Aliquam luctus turpis a nisi placerat mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin rutrum laoreet diam, vel vulputate mi rhoncus sit amet. Curabitur blandit rutrum auctor. In eros orci, sollicitudin sit amet commodo sed, hendrerit semper est. Aliquam consequat arcu vitae elit vulputate viverra. In ultricies accumsan velit, sed mollis ipsum hendrerit ac. Aenean enim justo, consequat egestas auctor id, dignissim ut sem. </p>
Ας δούμε τον CSS κώδικα στον οποίο θα ορίζουμε το border για την παράγραφό μας καθώς και το μήκος της.
#paddingParagraph{
width:400px;
border:1px solid blue;
}
Ας δούμε ένα στιγμιότυπο!!
Βλέπετε το μπλε border;Τώρα θα εφαρμόσω padding ώστε το περιεχόμενο της παραγράφου μου ,να απέχει 10pixels από όλα τα borders!Στη συνέχεια θα δω ένα στιγμιότυπο!
#paddingParagraph{
width:400px;
border:1px solid blue;
padding:10px;
}
Ας δω ένα στιγμιότυπο!!
Βλέπεται πώς λειτουργεί το padding;Το περιεχόμενο της παραγράφου μου είναι 10px μακριά από όλα το borders!!ΠΡΟΣΟΧΗ:Όταν εφαρμόζουμε padding σε ένα html στοιχείο,συμβαίνει το ίδιο όπως και με το border.Αυξάνεται το μέγεθος του στοιχείου.Στο παράδειγμα μας αυξήθηκε το μέγεθος του στοιχείου κατά 10px αριστερά ,δεξιά,πάνω και κάτω!!Αυτό είναι πολύ σημαντικό διότι εάν το ξεχάσουμε μπορεί να δημιουργήσουμε προβλήματα στην εμφάνιση του layout της ιστοσελίδας μας.Επίσης μπορούμε να εφαρμόσουμε padding σε μία μεριά,για παράδειγμα “padding-left”,σε δύο μεριές κλπ…!
Συντομογραφία για το padding
Εάν θέλουμε να εφαρμόσουμε padding αριστερά,δεξιά και κάτω μπορούμε να γράψουμε το εξής:
padding-left:10px; padding-right:10px; padding-bottom:5px;
To ίδιο ακριβώς αποτέλεσμα θα μας δώσει η παρακάτω εντολή:
/*Padding πάνω,αριστερά ,κάτω ,δεξιά.*/ padding:0 10px 5px 10px;
Ουσιαστικά δεν έχουμε να πούμε τίποτα περισσότερο για το padding.Ας δούμε το τελευταίο στοιχείο που απαρτίζει το box model το “margin“
Το τρίτο που θα δούμε είναι το “margin“
Το margin είναι το περιθώριο που δίνουμε στο html στοιχείο μας από την έξω μεριά.Θα μπορούσαμε να πούμε ότι με το margin δίνουμε ένα περιθώριο από το border και προς τα έξω.Ας δούμε μία απλή εικόνα στην οποία θα εφαρμόζουμε ένα margin σε ένα html στοιχείο.
Βλέπετε την κόκκινη περιοχή έξω από το border μας;Αυτό ουσιαστικά είναι το margin το οποίο είναι σα να καθαρίζει την περιοχή γύρω από το border.Μέσα σε αυτή την κόκκινη περιοχή δεν μπορούμε να τοποθετήσουμε τίποτα.Το margin στην πραγματικότητα είναι διαφανές και δεν φαίνεται.Απλά στο σχέδιο μας το κάναμε κόκκινο ώστε να το βλέπουμε!Ας δούμε ένα απλό παράδειγμα με margin ώστε να γίνει πιο κατανοητό!!Θα έχουμε 2 divs με κάποιο περιεχόμενο.Θα εφαρμόσουμε σε αυτές δύο διαφορετικά CSS ένα με margin kai ένα χωρίς margin και θα δούμε τις διαφορές του πριν και του μετά.
Παράδειγμα με margin
Θα δημιουργήσουμε 2 divs.Μια με κόκκινο φόντο και μία με πράσινο φόντο.Ας δούμε το html καθώς και το CSS που θα εφαρμόσουμε.Στη συνέχεια θα δούμε ένα στιγμιότυπο.
O html κώδικας είναι ο εξής:
<!-- Δεν χρειάζεται οι divs να περιέχουν κάτι ,θα τις κάνουμε με CSS να μοιάζουν με κουτιά. --> <div id="redDiv"></div> <div id="greenDiv"></div>
O CSS κώδικας έχει ως εξής:
#redDiv{
/*Με το width και το height δημιουργούμε κουτί με πλάτος και ύψος.*/
width:300px;
height:100px;
background: red;
}
#greenDiv{
width:300px;
height:100px;
background: green;
}
Ας δούμε ένα στιγμιότυπο..
Αυτό που βλέπουμε είναι ότι έχουμε δυο divs ,η μία κάτω από την άλλη που μεταξύ τους δεν υπάρχει κάποιο κενό.Δηλαδή η μία είναι σαν να είναι η συνέχεια της άλλης.Αν θέλουμε να δημιουργήσουμε ένα κενό μεταξύ τους μπορούμε να εφαρμόσουμε στην κόκκινη div ένα “margin” προς τα κάτω ,5px για παράδειγμα και θα δούμε ότι μεταξύ τους υπάρχει κενό.Ας το κάνουμε αλλάζοντας το CSS για την κόκκινη div.
#redDiv{
width:300px;
height:100px;
background: red;
margin-bottom:5px;
}
Ας δούμε τώρα ένα στιγμιότυπο!!
Με το “margin-bottom:5px” κάνουμε το εξής: Ζητάμε στην κόκκινη div να υπάρχει περιθώριο από το κάτω border 5px γι αυτό και η επόμενη div αρχίζει 5px πιο κάτω.Το ίδιο ακριβώς αποτέλεσμα θα είχαμε εάν στην πράσινη div προσθέταμε την εντολή “margin-top:5px;“.Διαπιστώνουμε λοιπόν ότι μπορούμε να έχουμε κάποια html στοιχεία και εφαρμόζοντας margin να μπορούμε να τα μετακινούμε όλα μαζί.Το margin μπορεί να εφαρμοστεί από πάνω από κάτω από αριστερά και από δεξιά.
Συντομογραφία για το margin.
Έστω ότι έχω θέλω να εφαρμόσω 5px margin από πάνω,5px στα δεξιά,6px από κάτω και 10 στα αριστερά.Μπορώ να γράψω…
margin: 5px 5px 6px 10px;
Ας δούμε συνολικά το box model στα CSS.
Ας δούμε την παρακάτω εικόνα που περικλείει όσα είπαμε παραπάνω!!
Η παραπάνω εικόνα περιέχει όλα όσα είπαμε παραπάνω.Είναι βασικά μια απεικόνιση του box model όπως αυτό χρησιμοποιείται στα CSS.
Επίλογος css tutorial.
Εδώ κάπου τελειώνει το σημερινό css tutorial το οποίο προσπάθησε να σας εξηγήσει το box model καθώς και τα τρία βασικά στοιχεία που το απαρτίζουν.Το “border“,το “margin” και το “padding“.Ευχαριστούμε πολύ για την παρακολούθηση!!!Τα παραπάνω tutorial θα σας βοηθήσει πολύ στην κατανόηση του web design tutorial που έχουμε δημιουργήσει!
Σχετικά άρθρα:
