Γιώργος Καραγιάννης ρώτησε πριν 8 έτη
Θέλω μια μικρή βοήθεια αν γίνεται στη CSS.
Η απορία μου είναι η εξής : ποια η διαφορά μεταξύ block, inline, inline-block;
Πες ότι έχω αυτόν τον κώδικα :
====================================

Result

===============
* {
border: 1px dashed blue;
}

div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius:100%;
/*Add your CSS here!*/
display: inline;
}

#one {
background-color: #FF0000;
}

#two {
background-color: #0000FF;
}

#three {
background-color: #FFD700;
}

#four {
background-color: #308014;
}
==========================
εκεί που λέει display και βάλεις block, το κάθε στρογγυλάκι θα είναι σε διαφορετική σειρά, άμα βάλεις inline-block θα είναι στην ίδια σειρά, ενώ σκέτο inline θα σχηματιστεί ένα τετραγωνάκι. Γιατί;

Πάνω-πάνω ανάμεσα στα ίσον αναφέρω και τον κώδικα html, αλλά δεν τον δείχνει.

6 Απαντήσεις

Άγγελος Κυρίτσης Staff απάντησε πριν 8 έτη

Το inline δείχνει ένα αντικείμενο μέσα σε μια γραμμή, όπως το “span”, δεν αλλάζει γραμμή για να εμφανιστεί.

Το block εμφανίζει το αντικείμενο σαν block element, όπως το “p”, που αλλάζει γραμμή για να εμφανιστεί.

Το inline block οργανώνει εσωτερικά το αντικείμενο σαν block (όσον αφορά τα υποαντικείμενα που περιέχει) αλλά εξωτερικά σαν αντικείμενο που είναι μέσα στη γραμμή.

Γιώργος Καραγιάννης απάντησε πριν 8 έτη

Δηλ. τα υποαντικείμενο ενός αντικειμένου το κάνει σαν block, το αλλάζει σειρά, ενώ το αντικείμενο το αφήνει στην ίδια γραμμή.

Υποαντικείμενο ποιο θεωρείται;
Και δηλ. όλο αυτό πως θα φαίνεται μετά στον browser;

Άγγελος Κυρίτσης Staff απάντησε πριν 8 έτη

Γιώργο, μην προσπαθείς να το καταλάβεις θεωρητικά. Κάνε αλλαγές και δοκιμές και θα δεις ακριβώς πως λειτουργεί.

Γιώργος Καραγιάννης απάντησε πριν 8 έτη

Έκανα μερικές και το κατάλαβα, ευχαριστώ.

Γιώργος Καραγιάννης απάντησε πριν 8 έτη

Και κάτι άλλο σχετικά με το positioning.
Κάνω δοκιμές στο codecademy αλλά ίδιες μου φαίνονται οι αλλαγές.
Άλλαξα το position:absolute σε relative και δεν έγινε κάτι διαφορετικό. Και με το fixed δοκίμασα.
Ποιες είναι οι διαφορές;

Άγγελος Κυρίτσης Staff απάντησε πριν 8 έτη

Δοκίμασε εδώ τα try it yourself για να καταλάβεις.