Jeśli chcesz zmienić plik JPG lub PNG, dodaj do obrazu pustą przestrzeń w edytorze grafiki. Jeśli chodzi o zdjęcie wyświetlane na stronie WWW, użyj CSS: margin tworzy odstęp na zewnątrz elementu, a padding – wewnątrz jego obramowania.
Jak dodać margines do pliku graficznego?
W tym przypadku margines staje się częścią obrazu. Zwiększają się więc jego wymiary, a dodana przestrzeń zostaje zapisana razem z plikiem. To dobre rozwiązanie, gdy zdjęcie ma być wysłane e-mailem, użyte w mediach społecznościowych albo przekazane do druku.
Najszybciej zrobisz to w edytorze online. Wybierz narzędzie, które pozwala ustawić osobne wartości dla górnego, dolnego, lewego i prawego marginesu, a następnie określ kolor tła. W przypadku plików PNG lub WEBP często można także wybrać przezroczyste wypełnienie.
Do szybkiej edycji możesz wykorzystać między innymi:
- Rozszerzacz Obrazu – pozwala dodać przestrzeń z każdej strony, ustawić jej rozmiar i kolor oraz obsługuje między innymi formaty PNG, JPG i WEBP.
- Edytor online z funkcją canvas – umożliwia zmianę rozmiaru obszaru roboczego i przesunięcie zdjęcia względem jego krawędzi.
- Paint w Windows – wystarcza do prostego powiększenia płótna i wypełnienia go jednolitym kolorem.
- Podgląd w macOS – może być użyteczny przy prostych zmianach wymiarów i przygotowaniu obrazu do zapisu w innym formacie.
Typowy proces w narzędziu online wygląda tak:
- Wczytaj zdjęcie metodą przeciągnij i upuść albo wybierz plik z dysku.
- Ustaw szerokość marginesu osobno dla każdej krawędzi.
- Wybierz kolor tła lub przezroczystość, jeśli format pliku ją obsługuje.
- Pobierz gotowy obraz w wybranym formacie.
W prostym edytorze systemowym wykonaj następujące czynności:
- Otwórz zdjęcie i wybierz zmianę rozmiaru płótna albo obszaru roboczego.
- Zwiększ jego szerokość i wysokość o planowany margines.
- Ustaw położenie zdjęcia, aby uzyskać równe albo asymetryczne odstępy.
- Wypełnij dodatkową przestrzeń kolorem i zapisz kopię pliku.
Przezroczysty margines wymaga formatu, który zachowuje kanał alfa, na przykład PNG lub WEBP. Zapis w JPG zastępuje przezroczystość kolorem tła, zwykle białym.
Margines do zdjęcia na stronie WWW – CSS
CSS nie zmienia samego pliku graficznego. Określa jedynie, jak obraz ma być rozmieszczony w dokumencie. Dzięki temu możesz zmienić odstępy bez ponownego eksportowania JPG lub PNG.
Właściwości te opisuje Box Model, czyli model pudełkowy elementu. Od środka znajdują się w nim: zawartość, padding, border oraz margin. Margines zewnętrzny jest poza obramowaniem i pozostaje przezroczysty, natomiast padding znajduje się wewnątrz elementu.
| Właściwość | Opis | Zastosowanie |
|---|---|---|
margin |
Odstęp między zdjęciem a innymi elementami lub krawędzią kontenera | Oddzielenie obrazu od tekstu, przycisku albo kolejnego zdjęcia |
padding |
Odstęp między zawartością a obramowaniem elementu | Stworzenie przestrzeni wewnątrz ramki lub kolorowego kontenera |
border |
Obramowanie znajdujące się między paddingiem a marginesem | Dodanie widocznej ramki wokół zdjęcia |
Odstęp na zewnątrz zdjęcia
Jeśli chcesz odsunąć obraz od sąsiednich elementów, użyj właściwości margin:
img {
margin: 20px;
}Wartość 20px tworzy odstęp o szerokości 20 pikseli z każdej strony obrazu. Możesz też podać różne wartości dla kolejnych krawędzi. Kolejność to góra, prawa, dół i lewa strona:
img {
margin: 10px 20px 30px 40px;
}Jeśli obraz ma określoną szerokość i ma zostać wyśrodkowany w kontenerze, użyj automatycznych marginesów poziomych:
img {
display: block;
width: 300px;
margin: 0 auto;
}margin: 0 auto ustawia zerowy odstęp pionowy, a wolne miejsce po lewej i prawej stronie rozdziela automatycznie. display: block sprawia, że obraz zachowuje się jak element blokowy, co ułatwia jego wyśrodkowanie.
Przestrzeń wewnątrz ramki
Jeżeli zdjęcie znajduje się w elemencie z tłem lub obramowaniem, a odstęp ma pojawić się między obrazem a tą ramką, zastosuj padding:
.photo-frame {
padding: 16px;
background: white;
border: 1px solid #ddd;
}
.photo-frame img {
display: block;
max-width: 100%;
}W tym przykładzie biały obszar o szerokości 16 pikseli pojawia się wewnątrz elementu .photo-frame. Sam obraz nie otrzymuje zewnętrznego odstępu. Jeśli chcesz dodać widoczną, równą ramkę bez dodatkowego kontenera, możesz użyć border:
img {
border: 12px solid white;
}Warto pamiętać o box-sizing. Przy domyślnej wartości content-box szerokość obrazu odnosi się do samej zawartości, a padding i obramowanie zwiększają całkowity rozmiar elementu. Przy border-box określona szerokość obejmuje zawartość, padding i border. Margines nie jest wliczany do szerokości ani wysokości elementu.
Jak dobrać margines, żeby zdjęcie wyglądało dobrze?
Margines powinien tworzyć wyraźny oddech, ale nie odciągać uwagi od obrazu. W galerii zachowuj te same wartości odstępów, szczególnie gdy zdjęcia mają różne proporcje. Przy pojedynczej fotografii możesz użyć większej przestrzeni, aby uzyskać efekt spokojnej, minimalistycznej kompozycji.
Najbezpieczniej zacząć od jednego koloru tła – białego, czarnego albo odcienia już występującego na zdjęciu. Kolor pobrany kroplomierzem zwykle lepiej łączy obraz z dodanym marginesem niż przypadkowa, intensywna barwa. Na stronie WWW rozdzielaj funkcje właściwości: margin służy do układu elementów, a padding do przestrzeni wewnątrz ramki.
