Subscribe:Posts Comments

Είστε εδώ: Home » Κατασκευή Ιστοσελίδων, Τελευταία άρθρα » CSS tutorial για αρχάριους.Επεξήγηση του border-padding-margin-box model.

Καλησπέρα σας!!!!!!!Ύστερα από μία εβδομάδα επιστρέφουμε και πάλι δυναμικά με σκοπό να σας δώσουμε πολλά,όμορφα και πολύ αναλυτικά tutorials .Η αλήθεια είναι ότι μας λείψατε πολύ!Το σημερινό μας tutorial έχει να κάνει με ένα θέμα στα CSS το οποίο πολλές φορές γίνεται αιτία μπερδέματος.Θα μιλήσουμε για το margin και το padding και το box-model στα CSS.Αν όλα αυτά σας φαίνονται δύσκολα και μπερδεμένα,ας ξεκινήσουμε σιγά σιγά το σημερινό tutorial :-) και θα τα διαλευκάνουμε όλα!Αν θέλετε μπορείτε να ρίξετε μία ματιά σε αυτό το CSS tutorial σε περίπτωση που δεν γνωρίζετε σχετικά με τα CSS.

Τι είναι το box model στα CSS και γιατί πρέπει να το ξέρω;;

Είναι πολύ σημαντικό να γνωρίζετε ότι στα CSS όλα τα html στοιχεία θεωρούνται σαν να είναι τετράγωνα κουτιά.Δηλαδή μία εικόνα,μία παράγραφος, μία ενότητα(div) θεωρούνται ότι έχουν σχήμα κουτιού.Ας δούμε μία εικόνα :
css box model

Στην παραπάνω εικόνα διαπιστώνουμε και οπτικά αυτό που είπαμε παραπάνω.Βλέπουμε ότι έχουμε μια 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;
}

Ας δούμε ένα στιγμιότυπο:
css border example

Βλέπετε που το κείμενο μας περικυκλώνεται από ένα μαύρο όριο;;;Αυτό ουσιαστικά είναι το 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;
}

Ας δούμε ένα στιγμιότυπο:
different css border styles
Είδατε λοιπόν πόσο εύκολο είναι να εφαρμόσουμε ένα 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;
}

Ας δούμε ένα στιγμιότυπο!!
 css with no padding

Βλέπετε το μπλε border;Τώρα θα εφαρμόσω padding ώστε το περιεχόμενο της παραγράφου μου ,να απέχει 10pixels από όλα τα borders!Στη συνέχεια θα δω ένα στιγμιότυπο!

#paddingParagraph{
    width:400px;
    border:1px solid blue;
    padding:10px;
}

Ας δω ένα στιγμιότυπο!!
 css styles with padding applied
Βλέπεται πώς λειτουργεί το 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 στοιχείο.
css margin picture

Βλέπετε την κόκκινη περιοχή έξω από το 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 applied

Με το “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.

Ας δούμε την παρακάτω εικόνα που περικλείει όσα είπαμε παραπάνω!!
css
Η παραπάνω εικόνα περιέχει όλα όσα είπαμε παραπάνω.Είναι βασικά μια απεικόνιση του box model όπως αυτό χρησιμοποιείται στα CSS.

Επίλογος css tutorial.

Εδώ κάπου τελειώνει το σημερινό css tutorial το οποίο προσπάθησε να σας εξηγήσει το box model καθώς και τα τρία βασικά στοιχεία που το απαρτίζουν.Το “border“,το “margin” και το “padding“.Ευχαριστούμε πολύ για την παρακολούθηση!!!Τα παραπάνω tutorial θα σας βοηθήσει πολύ στην κατανόηση του web design tutorial που έχουμε δημιουργήσει!

About the author

Αρχιμήδης Μερτζάνος wrote 6 articles on this blog.

Ο Ακης είναι ένας τύπος που ασχολείται τα τελευταία 4 χρόνια με το web development και του αρέσει πολύ!Δημιούργησε το site akisplace.com διότι θέλει να δημιουργήσει ένα μέρος όπου ακόμα και οι εντελώς αρχάριοι μπορούν να νιώθουν άνετα!"Μάθετε το γιατί,όχι μόνο το "πώς", είναι το σύνθημα..!

Σχετικά άρθρα:

  1. Μάθημα CSS για αρχάριους.
  2. CSS Tutorial:Δημιουργήστε μία CSS gallery εικόνων εύκολα.
Tags:


Αφήστε ένα σχόλιο


© ifeed.gr team 2010 · Subscribe:ΆρθραΣχόλια