Ιδιότητα shape-margin
Η ιδιότητα shape-margin ορίζει ένα περιθώριο γύρω από το σχήμα,
που ορίζεται από την ιδιότητα shape-outside.
Αυτό επιτρέπει την αύξηση της απόστασης μεταξύ του σχήματος και του κείμενου που ρέει γύρω του.
Σύνταξη
επιλογέας {
shape-margin: τιμή;
}
Παράδειγμα
Ένας κύκλος με περιθώριο 20px:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
shape-margin: 10px;
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
Παράδειγμα
Ένα τρίγωνο με περιθώριο 1em:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
shape-margin: 1em;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
background: #e74c3c;
}
p {
width: 500px;
text-align: justify;
}
:
Δείτε επίσης
-
η ιδιότητα
shape-outside,
που ορίζει το σχήμα για τη ροή -
η ιδιότητα
clip-path,
που δημιουργεί το ορατό σχήμα του στοιχείου -
η ιδιότητα
float,
απαραίτητη για τη λειτουργία του shape-margin