Ο συνδυασμός float και margin στο CSS

Αυτή τη στιγμή το κείμενό μας είναι σφιγμένο στην εικόνα από την αριστερή πλευρά. Ας προσπαθήσουμε να το απομακρύνουμε λίγο. Για να το κάνουμε αυτό, θα ορίσουμε στα παραγράφους μας αριστερό margin σε 30px, και στο γονικό div - ένα κόκκινο περίγραμμα.

Απροσδόκητα, μόνο το κείμενο που βρίσκεται δίπλα στο γονικό div θα απομακρυνθεί προς τα δεξιά, ενώ το κείμενο που βρίσκεται δίπλα στην εικόνα - δεν θα μετακινηθεί:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
}
img {
	float: left;
}

Για να καταλάβουμε γιαquoi συμβαίνει αυτό, ας προσθέσουμε σται παραγράφους ένα πράσινο περίγραμμα:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
}

Όπως βλέπουμε, στην πραγματικότητα οι παράγραφοι απομακρύνονται από την αριστερή άκρη, αλλά όχι από την εικόνα, αλλά από το γονικό div. Για να το εξετάσουμε πιο αναλυτικά, ας προσθέσουμε επιπλέον ημιδιαφάνεια στην εικόνα μέσω της ιδιότητας opacity:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Τώρα βλέπουμε ξεκάθαρα ότι υπάρχει αντίδραση στο margin-left, μόνο που στην πραγματικότητα οι παράγραφοι βρίσκονται κάτω από την εικόνα. Ας αφαιρέσουμε το περιθώριο, αφήνοντας ωστόσο την ημιδιαφάνεια της εικόνας:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Έτσι ακριβώς φαίνονται στην πραγματικότητα οι παράγραφοί μας - το κείμενό τους έχει απομακρυνθεί από την εικόνα, αλλά φυσικά οι παράγραφοι βρίσκονται κάτω από την εικόνα, αυτό φαίνεται από το περίγραμμα, που ξεκινάει από την αριστερή άκρη του γονικού div.

Ας επαναφέρουμε το margin και ας βάλουμε την εικόνα στην πρώτη παράγραφο:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Τώρα η εικόνα μετακινείται μαζί με τις παραγράφους!