Ostatnio edytowany:

shape-margin

Autor: Virtual Patriot

Opis właściwości shape-margin

Za pomocą właściwości shape-margin możemy określić rozmiar zewnętrznych marginesów nowego kształtu obszaru interesującego nas elementu HTML. Mowa tu o pływającym elemencie HTML.

Dodatkowe techniczne informacje o właściwości shape-margin

przeznaczenie

pływający element HTML

dziedziczenie

nie

wartość initial

0

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości shape-margin

Firefox

nie

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości shape-margin

rozmiar

Opis

Za pomocą właściwości shape-margin oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar zewnętrznych marginesów nowego kształtu obszaru interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści

Dla zaawansowanych

zasada dotycząca najbliższego elementu przodka tworzącego blok treści jest prawdziwa tylko wtedy, gdy element HTML, do którego chcemy dodać właściwość shape-margin wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative

Przykład

  shape-margin:15px;
float
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Rozmiar zewnętrznych marginesów nowego kształtu, do którego został ograniczony kształt obszaru przykładowego elementu "div#float", wynosi 15 pikseli, ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-margin" wraz z wartością "15px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#CBFFFF;
      }

      #float {
        shape-outside:polygon(0 0, 100px 100px, 0 200px);
        shape-margin:15px;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>