Это руководство научит вас процедуре создания пространства между двумя звеньями.
Давайте начнем!
Как оставить пространство между двумя ссылками в HTML и CSS?
Чтобы оставить место между двумя ссылками, прежде всего, добавьте необходимые ссылки в файл HTML.
Шаг 1: Добавьте ссылки в HTML
В HTML мы создадим контейнер с помощью тега
HTML
< див >< а href знак равно «https://linuxhint.com/create-html-file/» > Как создать HTML-файл? < / а >
< а href знак равно «https://linuxhint.com/edit-html-file/» > Как редактировать HTML-файл? < / а >
< / див >
На следующем изображении показано, что ссылки были успешно добавлены:
Шаг 2: стилизуйте Div и ссылку
На этом шаге стилизуйте div и ссылку, используя « див 'в CSS. Мы настроим отступ на « 40 пикселей ” и установите размер шрифта ссылок как “ больше ', высота div устанавливается как ' 150 пикселей », и используйте свойство фона и установите цвет div как « черный ». После этого отрегулируйте ширину границы как « 5 пикселей », стиль как « пунктирная ' и цвет как ' RGB(251, 255, 0) ».
CSS
див {набивка : 40 пикселей ;
размер шрифта : больше ;
высота : 150 пикселей ;
фон : черный ;
граница : 5 пикселей пунктирная RGB ( 251 , 255 , 0 ) ;
}
Используя приведенный выше код, получается следующий вывод. Как видите, и div, и ссылки имеют стили:
Шаг 3: Дайте пространство между двумя ссылками по горизонтали
Мы можем выделить пространство между двумя ссылками по горизонтали, используя HTML и CSS. Здесь мы объясним оба метода один за другим.
Способ 1: Использование HTML
Чтобы оставить пространство между ссылками без написания внешнего CSS, вы можете использовать « » в HTML, где вы хотите создать пространство. “ ” означает неразрывный пробел. В файле HTML добавление одного означает один пробел. Если вы хотите дать больше места, нежелательно вручную добавлять в соответствии с требуемым количеством пробелов.
Давайте перейдем к примеру, чтобы понять изложенную концепцию!
Пример
Здесь мы напишем четыре раза « », чтобы создать пробел после первой ссылки таким образом, чтобы вторая ссылка появилась после четырех пробелов.
HTML
< див >< а href знак равно «https://linuxhint.com/create-html-file/» > Как создать HTML-файл? < / а >
Как редактировать файл HTML?
Как видите, пространство создается справа от первой ссылки:
Способ 2: Использование CSS
В CSS мы будем использовать « край справа », чтобы дать пространство между двумя ссылками. “ край справа ” используется для добавления пространства с правой стороны элемента. Вы также можете установить для него отрицательные значения.
Синтаксис
Синтаксис свойства margin-right приведен ниже:
край справа : ценностьВ месте ' ценность », установите отступ с правой стороны элемента. Продолжим пример.
Пример
Здесь мы будем использовать « а », чтобы получить доступ к ссылке, которую мы создали в HTML. Затем установите значение свойства margin-right как « 50 пикселей ”:
а {край справа : 50 пикселей ;
}
Пробел создается с правой стороны первой ссылки, которую можно увидеть ниже:
Шаг 4: Дайте пространство между двумя ссылками по вертикали
Чтобы дать вертикальное пространство между двумя ссылками, сначала выровняйте ссылки по вертикали. Это будет сделано с помощью « блокировать ” стоимость “ отображать », а затем с помощью « высота линии », чтобы дать пространство между двумя строками ссылок.
Пример:
Здесь мы установим значение свойства отображения как « блокировать », чтобы выровнять ссылки по вертикали. Затем дайте пространство между двумя ссылками, установив значение свойства line-height как « 80 пикселей ”:
а {отображать : блокировать ;
высота линии : 80 пикселей ;
}
Как видите, пространство создается с помощью свойства line-height:
Вот и все! Мы объяснили метод создания пробела между двумя ссылками в HTML и CSS.
Вывод
“ », « край справа ', а также ' высота линии » свойства CSS используются для создания горизонтального и вертикального пространства между двумя ссылками. Используя это, вы можете настроить пространство справа и слева от ссылок. В этой статье мы объяснили процедуру создания пробела между двумя ссылками с помощью двух разных методов и предоставили соответствующие примеры.