Jak dać miejsce między dwoma linkami w HTML i CSS?

W HTML linki to hiperłącza, które mogą prowadzić do innych stron. Linki zwykle łączą zasoby internetowe, takie jak obrazy, filmy, pliki PDF lub strony internetowe. HTML używa „”Tag do utworzenia linków poprzez określenie adresu URL i łączenie tekstu. Po dodaniu dwóch linków w HTML domyślnie są one umieszczone obok siebie bez miejsca.

Ten podręcznik nauczy Cię procedury tworzenia przestrzeni między dwoma linkami.

Zacznijmy!

Jak dać miejsce między dwoma linkami w HTML i CSS?

Aby przede wszystkim podać przestrzeń między dwoma linkami, dodaj wymagane linki w pliku HTML.

Krok 1: Dodaj linki w HTML

W HTML utworzymy kontener za pomocą znacznika i dwóch linków za pomocą znacznika. Tutaj do podania adresu witryny używane jest odniesienie hiperłącza i do zapewnienia wymaganego hiperłącza. Oprócz adresu określ nazwisko linku, ponieważ link nie pojawia się na stronie internetowej. Wyświetli tylko nazwę lub przypisany podpis.

Html

Jak utworzyć plik HTML?
Jak edytować plik HTML?

Poniższy obraz pokazuje, że linki zostały pomyślnie dodane:

Krok 2: Styl Div & Link

W tym etapie stygnij DIV i link za pomocą „div„W CSS. Dostosujemy wyściółkę do „40px”I ustaw rozmiar czcionki linków jako„większy”, Wysokość div jest ustawiona jako„150px”I użyj właściwości tła i ustaw kolor Div jako„czarny". Następnie dostosuj szerokość obramowania jako „5px”, Styl jako„przeszyty”I kolor jako„RGB (251, 255, 0)".

CSS

div
Wyściółka: 40px;
Rozmiar czcionki: większy;
Wysokość: 150px;
Tło: czarny;
granica: 5px przerywany RGB (251, 255, 0);

Korzystając z powyższego kodu, uzyskano następujące dane wyjściowe. Jak widać, zarówno div, jak i linki są stylizowane:

Krok 3: Daj przestrzeń między dwoma linkami poziomo

Możemy dać przestrzeń między dwoma linkami poziomo za pomocą HTML i CSS. Tutaj wyjaśnimy obie metody jeden po drugim.

Metoda 1: Za pomocą HTML

Aby zapewnić przestrzeń między linkami bez pisania zewnętrznego CSS, możesz użyć ””W HTML, gdzie chcesz stworzyć przestrzeń. "”Oznacza nie przełomową przestrzeń. W pliku HTML dodanie jednego oznacza jedno miejsce. Jeśli chcesz dać więcej miejsca, nie jest to lepsze do ręcznego dodania zgodnie z wymaganą liczbą przestrzeni.

Przejdźmy do przykładu, aby zrozumieć określoną koncepcję!

Przykład

Tutaj napiszemy cztery razy ”„Aby stworzyć przestrzeń po pierwszym linku w taki sposób, aby drugi link pojawił się po czterech miejscach.

Html

Jak utworzyć plik HTML?
Jak edytować plik HTML?

Jak widać, przestrzeń jest tworzona po prawej stronie pierwszego linku:

Metoda 2: Korzystanie z CSS

W CSS użyjemy „margines-prawy„Własność, aby dać miejsce między dwoma linkami. „„margines-prawy„Własność jest wykorzystywana do dodawania przestrzeni z prawej strony elementu. Możesz także określić dla niego wartości ujemne.

Składnia

Składnia właściwości prawej marginesu podano poniżej:

margines-prawy: wartość

W miejscu "wartość”, Ustaw margines z prawej strony elementu. Kontynuujmy przykład.

Przykład

Tutaj użyjemy „A„Aby uzyskać dostęp do linku, który utworzyliśmy w HTML. Następnie ustaw wartość właściwości prawej marży jako „50px”:

A
margines-prawy: 50px;

Przestrzeń jest tworzona z prawej strony pierwszego linku, który można zobaczyć poniżej:

Krok 4: Daj przestrzeń między dwoma linkami pionowo

Aby dać pionową przestrzeń między dwoma linkami, najpierw wyrównaj linki w formie pionowej. Odbędzie się to za pomocą „blok„Wartość„wyświetlacz„Własność, a następnie za pomocą„Wysokość linii„Własność, aby zapewnić przestrzeń między dwiema linkami.

Przykład:

Tutaj ustawimy wartość właściwości wyświetlania jako „blok„Aby wyrównać linki pionowo. Następnie podaj przestrzeń między dwoma linkami, ustawiając wartość właściwości linii jako „80px”:

A
Blok wyświetlacza;
Wysokość linii: 80px;

Jak widać, przestrzeń jest tworzona przy użyciu właściwości linii:

Otóż ​​to! Wyjaśniliśmy metodę dawania miejsca między dwoma linkami w HTML i CSS.

Wniosek

„„”,„margines-prawy", I "Wysokość linii„Właściwości CSS są używane do zapewnienia poziomej i pionowej przestrzeni między dwoma łączami. Za pomocą tego możesz dostosować przestrzeń z prawej i lewej strony linków. W tym artykule wyjaśniliśmy procedurę podania miejsca między dwoma linkami przy użyciu dwóch różnych metod i podaliśmy powiązane przykłady.