Jak zmienić odstępy między akapitami tekstu?

Podczas korzystania z tagu

Wcięcia są automatycznie dodawane na górze i na dole akapitu tekstu. Odbywa się to w celu wizualnego oddzielenia jednego bloku tekstu od następnego. Oczywiste jest, że domyślne wartości wcięć nie zawsze są zadowalające, dlatego czasami trzeba je zmniejszyć lub zwiększyć. Aby to zrobić, możesz użyć uniwersalnego marginesu właściwości, który definiuje wcięcia po wszystkich stronach akapitu lub marginesu górnego dla wcięcia górnego i marginesu dolnego dla wcięcia dolnego.

Opis

Ustawia wielkość dopełnienia od prawej krawędzi elementu. Padding to odległość od zewnętrznej krawędzi prawej krawędzi bieżącego elementu do wewnętrznej granicy jego elementu nadrzędnego (rysunek 1).

Składnia

margines-prawy: wartość | auto | dziedziczyć

Wartości

Ilość odpowiedniego dopełnienia można określić w pikselach (px), procentach (%) lub innych jednostkach akceptowanych przez CSS. Wartość może być dodatnia lub ujemna.

Auto Wskazuje, że rozmiar wcięć będzie automatycznie obliczany przez przeglądarkę. dziedziczy Dziedziczy wartość od rodzica.

HTML5 CSS2.1 IE Cr Op Sa Fx

Wynik tego przykładu pokazano na ryc. 2.

Ryż. 2. Zastosowanie prawa do depozytu zabezpieczającego

Model obiektowy

document.getElementById ("elementID") .style.marginRight

Przeglądarki

Internet Explorer 6 podwaja lewą lub prawą wartość dopełnienia dla elementów pływających zagnieżdżonych w elementach nadrzędnych. Dopełnienie przylegające do strony rodzica jest podwojone. Problem zazwyczaj rozwiązuje się dodając display: inline do elementu pływającego.

Program Internet Explorer do wersji 7.0 włącznie nie obsługuje wartości dziedziczenia.

Aby piękniej wyświetlać elementy na stronie internetowej, używane są wcięcia zewnętrzne i wewnętrzne w css, a teraz przeanalizujemy to na przykładach.

Każdy element, czy to akapit, div, obraz lub wideo, jest blokiem, w którym można wciąć zarówno wewnątrz za pomocą właściwości padding, jak i na zewnątrz za pomocą marginesu.

W css te właściwości są zapisywane dla wcięć w ten sposób (na przykład bierze się akapit):

Zamiast znacznika P piszesz oczywiście swój element, dla którego zostanie zastosowane wcięcie.

Konieczne jest zrozumienie i zapamiętanie, że dla parametrów marginesu i wypełnienia konstrukcja wcięć dla każdej strony jest taka sama.
Oznacza to, że w każdym wcięciu mamy 4 wartości:

Wartości wcięć.

• Pierwsze znaczenie: górne wcięcie;
• Drugie znaczenie: wcięcie w prawo;
• Trzecie znaczenie: margines dolny;
• Czwarte znaczenie: wcięcie z lewej.

W tym przykładzie zrobiłem margines zewnętrznego dopełnienia w css w ten sposób: napisałem na górze 20px, z lewej i prawej 10px (z reguły dla symetrii są pisane tak samo), a na dole ja wskazane 30px.

A dla wypełnienia wewnętrznego wyściółki określiłem: 10px na górze, z lewej i prawej strony oraz 14px na dole.

Wartość dopełnienia we właściwościach marginesu i dopełnienia można zmniejszyć, pod warunkiem, że są one tego samego rozmiaru.
Z mojego przykładu skrócona notacja będzie już wyglądać tak:

Oznacza to, że gdy brakuje ostatniego wpisu liczbowego, w tym przypadku lewego wcięcia, przeglądarka automatycznie zastępuje lewe wcięcie taką samą wartością, jak wartość po prawej stronie.
A w moim przypadku wcięcia po prawej i lewej stronie będą miały po 10 pikseli, co jest na marginesie, który jest w dopełnieniu.

A jeśli masz te same wartości dla marginesów zewnętrznych na górze i na dole (np. 16px) i te same wartości dla marginesów zewnętrznych po lewej i prawej (np. 20px), to zapis będzie miał jeszcze bardziej skróconą formę:

Odpowiednio, dla wewnętrznego wcięcia css, wpis jest identyczny jak ten.

Stosowanie pojedynczych wcięć: dla każdej strony osobno.

Następujące właściwości jednowartościowe mają zastosowanie do określenia oddzielnego wcięcia:

Właściwości usztywniające z każdej strony.

• margines górny: 3px; zewnętrzna górna wyściółka;
• margines lewy: 4px; zewnętrzny lewy margines;
• margines prawy: 6px; zewnętrzny prawy margines;
• margines-dolny: 10px; zewnętrzna dolna wyściółka.

Wpisy są pisane w ten sam sposób dla dopełnienia wewnętrznego, tylko musisz zastąpić margines dopełnieniem.

Na przykład masz już wszystkie wcięcia w CSS dla wszystkich obrazów img.

To znaczy (dla jasności) zewnętrzne dopełnienie ma następujące wartości: górne 10px, lewe i prawe: po 20px i dolne 14px.
A wyściółka ma 6 pikseli ze wszystkich 4 stron.

Powiedzmy, że zdecydowałeś się umieścić na stronie kolejne zdjęcie, ale w tym celu chcesz tylko zmienić zewnętrzny margines u góry, a resztę pozostawić bez zmian. I do wykonania tego zadania wystarczy napisać klasę do tego obrazka i dodać dodatkowy wpis do css.

W rezultacie obraz dodany z klasą verx zaakceptuje wszystkie wcięcia określone w css dla tagu img, a jedynie zmieni margines dla górnej strony (w naszym przypadku: 40px).

Próbowałem uszczegółowić opis wcięcia w css, ale jeśli masz jakieś pytania, zadaj je w komentarzach.

Cześć! Początkowo chciałem podzielić ten artykuł na 4 małe, ale potem się nad tym zastanowiłem. Po co? W końcu wygodniej jest, gdy takie informacje są gromadzone w ramach jednego materiału.

Dlatego dzisiaj dowiemy się, jak wcinać CSS z lewej i ze wszystkich innych stron - z prawej, od góry i od dołu. Można to zrobić dla zdjęć i tekstów. Są dwojakiego rodzaju:

• Zewnętrzny;
• Wewnętrzny.

W pierwszym przypadku używany jest margines właściwości klucza, w drugim dopełnienie. Dla jasności zrobiłem dla ciebie mały przykład. Aby wygodniej wizualnie odróżnić przestrzeń wewnętrzną od zewnętrznej, dodałem widoczną tabelę. Zobaczmy co się stało?

Wyściółka zewnętrzna

Rejestrując je w pliku stylu CSS, będzie można ustawić orientację bloku informacyjnego na stronie. Na przykład przesuń go w lewo iw dół. Zademonstrujmy od razu, jak to będzie wyglądać.

Ogólnie rzecz biorąc, możesz użyć następujących opcji, aby ustawić wcięcia.

Lewy (margines lewy).

Prawo (margin-prawo).

Top (górny margines).

Dół (margin-dolny).

Teraz pokażę Ci kolejny fajny niuans.

Jak widać, możesz skorzystać z jednej z opcji - efekt jest ten sam. Tylko w drugim przypadku kod jest bardziej zwarty. Zwróć też uwagę, że wypełnienie jest zgodne z ruchem wskazówek zegara. Wszystko zaczyna się u góry i kończy po lewej stronie.

Wyściółka wewnętrzna

Tutaj procedura jest podobna. Dopiero teraz dodam nowe właściwości nie dla całej tabeli, ale dla zawartości kolumn.

Zobaczmy, co z tego wyszło.

Analogicznie do marginesów wewnętrznych w CSS, marginesy zewnętrzne można zapisać w skróconym kodzie lub osobno dla boków.

To były najważniejsze wydarzenia. Na koniec pokażę, jak możesz ułatwić sobie część pracy.

Wcięcie na poziomie wybranych tagów

W przypadkach, które omówiliśmy powyżej, są one ustawione jednocześnie na tekst i obrazy. W rzeczywistości możesz ustawić odległość do elementów na poziomie określonej etykiety. Pokażę ci jak to działa. Cofnij ostatnie zmiany i umieść niestandardowy kod w arkuszu stylów.

Przyjrzyjmy się, co się stało po zapisaniu zmian.

Obraz pozostał na miejscu, przesunął się tylko tekst ujęty po lewej stronie. Podobne manipulacje można zastosować do innych bloków, na przykład tr, span.

Jako dodatkowe informacje proponuję do recenzji publikację o zadaniu. Opisano tam również dość ciekawe metody. Może być przydatny do tworzenia czerwonej linii w tekście lub wykonywania innych czynności.

Dodatkowo istnieje abonament na bezpłatną dystrybucję informacji na adresy e-mail. Istnieje specjalny formularz subskrypcji bloga. Do następnego razu.

Właściwość określa, ile poziomej przestrzeni tekstowej ma zostać zawinięte przed początkiem pierwszego wiersza elementu tekstowego. Rozstaw liczony jest od początku od krawędzi elementu i pojemnika dla poziomu bloku.

Ponieważ większość treści strony internetowej jest prezentowana w formie tekstu, umiejętność stylizowania tego tekstu, zarówno atrakcyjnego, jak i skutecznego, jest ważną umiejętnością, która może zostać projektantem stron internetowych. Najczęściej stosowaną i zalecaną metodą wcięcia opisu i akapitu jest użycie CSS. Tutaj znajdziesz różne przykłady wykorzystania CSS dla tekstu i elementu wcięcia.

Ustaw górny margines w CSS

Do tworzenia górnych marginesów na pewno nie możemy obejść się bez właściwości CSS, dlatego potrzebujemy margin-top, wartość tę można ustawić na różne sposoby, zarówno w pikselach, jak i standardowo na pikselach, em,% itd., że wszystko dzieje się w stylistyce CSS w jednostkach miary.

Przykład użycia:

Blok marży (
margines górny: 50px;
}

Co możesz zobaczyć na obrazku:

Możesz go również użyć do upuszczania bloków, tutaj możesz użyć właściwości o nazwie margines-lewy także margines w prawo oraz marża-dolna... Tam, gdzie po prostu wskazujemy właściwość margin, gdzie można wstępnie ustawić dla niej 4 parametry, tutaj rozważymy koncepcję zgodnie z ruchem wskazówek zegara, gdzie zaczynamy od góry i kontynuujemy pod każdą stroną.

margines: 20px 50px 30px 50px;

Ma również dopełnienie na górze w CSS

Zdarza się, że trzeba wyrównać element content w pionie, odnosi się to do bloku nadrzędnego, tutaj można użyć innych właściwości, takich jak padding-top, który robi, a raczej domyślnie ustawia padding w górę. Jeśli mówimy o podobnych właściwościach, które również można zapisać i ustawić przez analogię, to tutaj pojawia się margines w px, em,% i innych jednostkach.

Przykład:

Blok dopełniający (
dopełnienie górnej części: 47px;
}

Teraz możemy rozważyć analogię własności margines oraz wyściółka, który służy do ustawiania wcięć po innych stronach elementu blokowego, ale już idzie osobno: dopełnienie-lewo, dopełnienie-prawo, wyściółka-dół... Gdzie możesz od razu ustawić potrzebną odległość, tylko dla wszystkich stron, a wszystko będzie w tym samym czasie.

padding: 10px 20px 40px 50px;

Tutaj możesz wstępnie ustawić wartość jak dla margines zaczynając, jak rozumiesz od góry, ale potem wszystko idzie zgodnie z ruchem wskazówek zegara, jest po prawej, poniżej, po lewej i tak dalej.

Teraz, w zależności od sytuacji, masz możliwość tworzenia wcięć na szczycie stylów CSS, gdzie używamy właściwości margines oraz wyściółkaże możliwe jest wyświetlenie niezbędnych elementów na stronie twojego zasobu internetowego, tak jak wymyśliłeś i musisz to zrobić.