Táto príručka vás naučí postup vytvárania priestoru medzi dvoma odkazmi.
Začnime!
Ako dať priestor medzi dvoma odkazmi v HTML a CSS?
Ak chcete dať priestor medzi dvoma odkazmi, najskôr pridajte požadované odkazy do súboru HTML.
Krok 1: Pridajte odkazy do HTML
V HTML vytvoríme kontajner pomocou tagu
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Ako vytvoriť súbor HTML? < / a >
< a href = „https://linuxhint.com/edit-html-file/“ > Ako upraviť súbor HTML? < / a >
< / div >
Nasledujúci obrázok ukazuje, že odkazy boli úspešne pridané:
Krok 2: Upravte štýl Div & Link
V tomto kroku upravte štýl div a odkaz pomocou „ div ” v CSS. Výplň upravíme na „ 40 pixelov “ a nastavte veľkosť písma odkazov ako „ väčší “, výška div je nastavená ako „ 150 pixelov “ a použite vlastnosť pozadia a nastavte farbu div ako „ čierna “. Potom upravte šírku okraja ako „ 5 pixelov “, štýl ako „ prerušovaná “ a farbu ako „ rgb(251, 255, 0) “.
CSS
div {vypchávka : 40 pixelov ;
veľkosť písma : väčší ;
výška : 150 pixelov ;
pozadie : čierna ;
hranica : 5 pixelov prerušovaná rgb ( 251 , 255 , 0 ) ;
}
Pomocou vyššie uvedeného kódu sa získa nasledujúci výstup. Ako vidíte, div aj odkazy majú štýl:
Krok 3: Dajte priestor medzi dvoma odkazmi vodorovne
Pomocou HTML a CSS môžeme dať priestor medzi dva odkazy horizontálne. Tu vysvetlíme obe metódy jednu po druhej.
Metóda 1: Použitie HTML
Ak chcete dať priestor medzi odkazmi bez písania akéhokoľvek externého CSS, môžete použiť „ ” v HTML, kde chcete vytvoriť priestor. “ “ znamená neprerušiteľný priestor. Pridanie jedného v súbore HTML znamená jednu medzeru. Ak chcete dať viac miesta, nie je vhodné manuálne pridávať podľa požadovaného počtu miest.
Prejdime k príkladu, aby sme pochopili uvedený koncept!
Príklad
Tu napíšeme štyrikrát „ ” na vytvorenie medzery za prvým odkazom tak, že druhý odkaz sa zobrazí po štyroch medzerách.
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Ako vytvoriť súbor HTML? < / a >
Ako upraviť súbor HTML?
Ako vidíte, na pravej strane prvého odkazu sa vytvorí priestor:
Metóda 2: Použitie CSS
V CSS budeme používať „ okraj-pravý ” vlastnosť dať priestor medzi dvoma odkazmi. ' okraj-pravý ” vlastnosť sa využíva na pridanie priestoru z pravej strany prvku. Môžete preň nastaviť aj záporné hodnoty.
Syntax
Syntax vlastnosti margin-right je uvedená nižšie:
okraj-pravý : hodnotuNa mieste „ hodnotu “, nastavte okraj z pravej strany prvku. Pokračujme v príklade.
Príklad
Tu použijeme „ a ” pre prístup k odkazu, ktorý sme vytvorili v HTML. Ďalej nastavte hodnotu vlastnosti margin-right ako „ 50 pixelov “:
a {okraj-pravý : 50 pixelov ;
}
Priestor je vytvorený z pravej strany prvého odkazu, ktorý môžete vidieť nižšie:
Krok 4: Dajte priestor medzi dvoma odkazmi vertikálne
Ak chcete medzi dvoma prepojeniami poskytnúť zvislý priestor, najprv zarovnajte prepojenia vo zvislom tvare. To sa vykoná pomocou „ blokovať “hodnota “ displej “ a potom pomocou „ line-height ” vlastnosť dať priestor medzi dvoma linkami.
Príklad:
Tu nastavíme hodnotu vlastnosti display ako „ blokovať ” na vertikálne zarovnanie odkazov. Potom dajte medzeru medzi dva odkazy nastavením hodnoty vlastnosti line-height ako „ 80 pixelov “:
a {displej : blokovať ;
výška riadku : 80 pixelov ;
}
Ako vidíte, priestor je vytvorený pomocou vlastnosti line-height:
To je všetko! Vysvetlili sme spôsob poskytovania priestoru medzi dvoma odkazmi v HTML a CSS.
Záver
' “, “ okraj-pravý “ a „ line-height ” vlastnosti CSS sa používajú na poskytnutie horizontálneho a vertikálneho priestoru medzi dvoma odkazmi. Pomocou toho môžete upraviť priestor z pravej a ľavej strany odkazov. V tomto článku sme vysvetlili postup na udelenie priestoru medzi dvoma prepojeniami pomocou dvoch rôznych metód a poskytli súvisiace príklady.