Bu kılavuz size iki bağlantı arasında boşluk oluşturma prosedürünü öğretecektir.
Başlayalım!
HTML ve CSS'de İki Bağlantı Arasına Nasıl Boşluk Verilir?
İki link arasında boşluk bırakmak için öncelikle HTML dosyasına gerekli linkleri ekleyin.
Adım 1: HTML'de Bağlantılar Ekleyin
HTML'de
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > HTML dosyası nasıl oluşturulur? < / a >
< a href = “https://linuxhint.com/edit-html-file/” > HTML Dosyası Nasıl Düzenlenir? < / a >
< / div >
Aşağıdaki resim, bağlantıların başarıyla eklendiğini göstermektedir:
2. Adım: Div & Link'e stil verin
Bu adımda, div'i biçimlendirin ve “ kullanarak bağlantı kurun. div ” CSS'de. Dolguyu “ 40 piksel ” ve bağlantıların yazı tipi boyutunu “ olarak ayarlayın. daha büyük ”, div'in yüksekliği “ olarak ayarlanır. 150 piksel ” ve arka plan özelliğini kullanın ve div'in rengini “ olarak ayarlayın. siyah ”. Bundan sonra kenarlık genişliğini “olarak ayarlayın. 5 piksel ”, stil olarak “ kesikli ” ve renk olarak “ rgb(251, 255, 0) ”.
CSS
div {dolgu malzemesi : 40 piksel ;
yazı Boyutu : daha büyük ;
yükseklik : 150 piksel ;
arka fon : siyah ;
sınır : 5 piksel kesikli rgb ( 251 , 255 , 0 ) ;
}
Yukarıdaki kod kullanılarak aşağıdaki çıktı elde edilir. Gördüğünüz gibi, hem div hem de bağlantılar şu şekildedir:
3. Adım: İki Bağlantı Arasında Yatay Olarak Boşluk Verin
HTML ve CSS kullanarak yatay olarak iki link arasında boşluk bırakabiliriz. Burada her iki yöntemi de tek tek açıklayacağız.
Yöntem 1: HTML'yi Kullanma
Herhangi bir harici CSS yazmadan bağlantılar arasında boşluk bırakmak için “ ” alanı oluşturmak istediğiniz HTML'de. “ ” bölünmeyen boşluk anlamına gelir. HTML dosyasında bir eklemek, bir boşluk anlamına gelir. Daha fazla boşluk vermek istiyorsanız, gerekli boşluk sayısına göre manuel olarak eklemek tercih edilmez.
Belirtilen kavramı anlamak için örneğe geçelim!
Örnek
Burada dört kez yazacağız” ”, ikinci bağlantının dört boşluktan sonra görüneceği şekilde ilk bağlantıdan sonra boşluk oluşturmak için.
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > HTML dosyası nasıl oluşturulur? < / a >
HTML Dosyası Nasıl Düzenlenir?
Gördüğünüz gibi, ilk bağlantının sağ tarafında boşluk yaratılıyor:
Yöntem 2: CSS'yi Kullanma
CSS'de “ kenar-sağ ” özelliği, iki bağlantı arasında boşluk bırakmak için. “ kenar-sağ ” özelliği elemanın sağ tarafından boşluk eklemek için kullanılır. Bunun için negatif değerleri de belirleyebilirsiniz.
Sözdizimi
margin-right özelliğinin sözdizimi aşağıda verilmiştir:
kenar-sağ : değerYerine ' değer ”, öğenin sağ tarafından kenar boşluğunu ayarlayın. Örneğe devam edelim.
Örnek
Burada kullanacağız “ a ” HTML'de oluşturduğumuz bağlantıya erişmek için. Ardından, margin-right özelliğinin değerini “ olarak ayarlayın. 50 piksel ”:
a {kenar-sağ : 50 piksel ;
}
Aşağıda görülebilen ilk bağlantının sağ tarafından boşluk oluşturulur:
Adım 4: İki Bağlantı Arasında Dikey Olarak Boşluk Verin
İki bağlantı arasında dikey boşluk bırakmak için önce bağlantıları dikey biçimde hizalayın. Bu, “kullanılarak yapılacaktır. engellemek “değeri” Görüntüle ” özelliği ve ardından “ satır yüksekliği ” özelliği, iki bağlantı çizgisi arasında boşluk bırakmak için.
Örnek:
Burada display özelliğinin değerini “ olarak ayarlayacağız. engellemek ” bağlantıları dikey olarak hizalamak için. Ardından, line-height özelliğinin değerini “ olarak ayarlayarak iki bağlantı arasındaki boşluğu verin. 80 piksel ”:
a {Görüntüle : engellemek ;
satır yüksekliği : 80 piksel ;
}
Gördüğünüz gibi, boşluk, line-height özelliği kullanılarak oluşturulur:
Bu kadar! HTML ve CSS'de iki link arasında boşluk bırakma yöntemini anlattık.
Çözüm
“ ”, “ kenar-sağ ', ve ' satır yüksekliği ” özellikleri, iki bağlantı arasında yatay ve dikey boşluk vermek için kullanılır. Bunu kullanarak, bağlantıların sağ ve sol taraflarından boşluk ayarlayabilirsiniz. Bu yazıda, iki farklı yöntem kullanarak iki bağlantı arasında boşluk bırakma prosedürünü açıkladık ve ilgili örnekler verdik.