Ten podręcznik nauczy Cię procedury tworzenia przestrzeni między dwoma łączami.
Zacznijmy!
Jak zrobić miejsce między dwoma linkami w HTML i CSS?
Aby zrobić miejsce między dwoma linkami, najpierw dodaj wymagane linki w pliku HTML.
Krok 1: Dodaj linki w HTML
W HTML stworzymy kontener za pomocą znacznika
HTML
< div >< a href = „https://linuxhint.com/create-html-file/” > Jak stworzyć plik HTML? < / a >
< a href = „https://linuxhint.com/edit-html-file/” > Jak edytować plik HTML? < / a >
< / div >
Poniższy obraz pokazuje, że łącza zostały pomyślnie dodane:
Krok 2: Nadaj styl Div & Link
W tym kroku dostosuj styl div i link za pomocą „ div ” w CSS. Dopasujemy wyściółkę do „ 40px ” i ustaw rozmiar czcionki linków jako „ większy ”, wysokość elementu div jest ustawiona jako „ 150px ” i użyj właściwości background i ustaw kolor elementu div na „ czarny ”. Następnie dostosuj szerokość obramowania jako „ 5px ”, styl jako „ przerywany ” i kolor jako „ rgb(251, 255, 0) ”.
CSS
div {wyściółka : 40px ;
rozmiar czcionki : większy ;
wzrost : 150px ;
tło : czarny ;
granica : 5px przerywany RGB ( 251 , 255 , 0 ) ;
}
Używając powyższego kodu, otrzymujemy następujące dane wyjściowe. Jak widać, zarówno div, jak i linki są stylizowane:
Krok 3: Zostaw przestrzeń między dwoma łączami w poziomie
Możemy zapewnić przestrzeń między dwoma linkami w poziomie, używając HTML i CSS. Tutaj wyjaśnimy obie metody jedna po drugiej.
Metoda 1: Używanie HTML
Aby zapewnić przestrzeń między linkami bez pisania zewnętrznego CSS, możesz użyć „ ” w kodzie HTML, w którym chcesz stworzyć przestrzeń. “ ” oznacza niezniszczalną przestrzeń. W pliku HTML dodanie jednego oznacza jedną spację. Jeśli chcesz zapewnić więcej miejsca, nie zaleca się ręcznego dodawania zgodnie z wymaganą liczbą spacji.
Przejdźmy do przykładu, aby zrozumieć podaną koncepcję!
Przykład
Tutaj napiszemy cztery razy” ”, aby utworzyć spację po pierwszym linku w taki sposób, aby drugi link pojawił się po czterech spacjach.
HTML
< div >< a href = „https://linuxhint.com/create-html-file/” > Jak stworzyć plik HTML? < / a >
Jak edytować plik HTML?
Jak widać, przestrzeń jest tworzona po prawej stronie pierwszego linku:
Metoda 2: Korzystanie z CSS
W CSS użyjemy „ margines w prawo ” właściwość, aby zapewnić przestrzeń między dwoma linkami. „ margines w prawo Właściwość ” służy do dodania przestrzeni z prawej strony elementu. Możesz również określić dla niego wartości ujemne.
Składnia
Składnia własności margin-right jest podana poniżej:
margines w prawo : wartośćW miejscu ' wartość ”, ustaw margines od prawej strony elementu. Kontynuujmy przykład.
Przykład
Tutaj użyjemy „ a ”, aby uzyskać dostęp do linku, który stworzyliśmy w kodzie HTML. Następnie ustaw wartość właściwości margin-right jako „ 50px ”:
a {margines w prawo : 50px ;
}
Spacja jest tworzona z prawej strony pierwszego linku, co widać poniżej:
Krok 4: Zostaw przestrzeń między dwoma linkami w pionie
Aby zapewnić pionową przestrzeń między dwoma łączami, najpierw wyrównaj łącza w formie pionowej. Odbywa się to za pomocą „ blok ” wartość „ wyświetlacz ”, a następnie za pomocą „ Wysokość linii ” właściwość, aby zapewnić odstęp między dwiema liniami łącza.
Przykład:
Tutaj ustawimy wartość właściwości wyświetlania jako „ blok ”, aby wyrównać linki w pionie. Następnie daj odstęp między dwoma łączami, ustawiając wartość właściwości line-height na „ 80px ”:
a {wyświetlacz : blok ;
Wysokość linii : 80px ;
}
Jak widać, przestrzeń jest tworzona przy użyciu właściwości line-height:
Otóż to! Wyjaśniliśmy sposób nadawania przestrzeni między dwoma linkami w HTML i CSS.
Wniosek
„ ”, „ margines w prawo ', oraz ' Wysokość linii ” właściwości CSS są używane, aby zapewnić poziomą i pionową przestrzeń między dwoma linkami. Korzystając z tego, możesz dostosować przestrzeń z prawej i lewej strony linków. W tym artykule wyjaśniliśmy procedurę odstępu między dwoma linkami przy użyciu dwóch różnych metod i podaliśmy powiązane przykłady.