இந்த கையேடு இரண்டு இணைப்புகளுக்கு இடையில் இடத்தை உருவாக்குவதற்கான செயல்முறையை உங்களுக்குக் கற்பிக்கும்.
தொடங்குவோம்!
HTML & CSS இல் இரண்டு இணைப்புகளுக்கு இடையில் இடம் கொடுப்பது எப்படி?
இரண்டு இணைப்புகளுக்கு இடையில் இடைவெளி கொடுக்க, முதலில், HTML கோப்பில் தேவையான இணைப்புகளைச் சேர்க்கவும்.
படி 1: HTML இல் இணைப்புகளைச் சேர்க்கவும்
HTML இல்,
HTML
< div >< அ href = “https://linuxhint.com/create-html-file/” > HTML கோப்பை எவ்வாறு உருவாக்குவது? < / அ >
< அ href = “https://linuxhint.com/edit-html-file/” > HTML கோப்பை எவ்வாறு திருத்துவது? < / அ >
< / div >
இணைப்புகள் வெற்றிகரமாகச் சேர்க்கப்பட்டதை பின்வரும் படம் காட்டுகிறது:
படி 2: டிவ் & லிங்கை ஸ்டைல் செய்யவும்
இந்த படிநிலையில், ''ஐப் பயன்படுத்தி div மற்றும் இணைப்பை வடிவமைக்கவும் div ” CSS இல். நாங்கள் திணிப்பை சரிசெய்வோம் ' 40px ” மற்றும் இணைப்புகளின் எழுத்துரு அளவை “ என அமைக்கவும் பெரியது ', div இன் உயரம்' என அமைக்கப்பட்டுள்ளது 150px ” மற்றும் பின்னணி சொத்தை பயன்படுத்தவும் மற்றும் div இன் நிறத்தை அமைக்கவும் கருப்பு ”. அதன் பிறகு, பார்டர் அகலத்தை ' 5px ”, ஸ்டைல் கோடு போட்டது 'மற்றும் வண்ணம்' rgb(251, 255, 0) ”.
CSS
div {திணிப்பு : 40px ;
எழுத்துரு அளவு : பெரியது ;
உயரம் : 150px ;
பின்னணி : கருப்பு ;
எல்லை : 5px கோடு போட்டது rgb ( 251 , 255 , 0 ) ;
}
மேலே உள்ள குறியீட்டைப் பயன்படுத்தி, பின்வரும் வெளியீடு பெறப்படுகிறது. நீங்கள் பார்க்க முடியும் என, div மற்றும் இணைப்புகள் இரண்டும் பாணியில் உள்ளன:
படி 3: கிடைமட்டமாக இரண்டு இணைப்புகளுக்கு இடையில் இடம் கொடுங்கள்
HTML மற்றும் CSS ஐப் பயன்படுத்தி இரண்டு இணைப்புகளுக்கு இடையில் கிடைமட்டமாக இடைவெளி கொடுக்கலாம். இங்கே, இரண்டு முறைகளையும் ஒவ்வொன்றாக விளக்குவோம்.
முறை 1: HTML ஐப் பயன்படுத்துதல்
வெளிப்புற CSS எதுவும் எழுதாமல் இணைப்புகளுக்கு இடையில் இடைவெளி கொடுக்க, நீங்கள் ' ” நீங்கள் இடத்தை உருவாக்க விரும்பும் HTML இல். ' ” என்பது உடைக்காத இடத்தைக் குறிக்கிறது. HTML கோப்பில், ஒரு சேர்ப்பது என்பது ஒரு இடைவெளி. நீங்கள் அதிக இடம் கொடுக்க விரும்பினால், தேவையான இடைவெளிகளின்படி கைமுறையாக சேர்ப்பது விரும்பத்தக்கது அல்ல.
கூறப்பட்ட கருத்தை புரிந்து கொள்ள உதாரணத்திற்கு செல்லலாம்!
உதாரணமாக
இங்கே, நாங்கள் நான்கு முறை எழுதுவோம். ” நான்கு இடைவெளிகளுக்குப் பிறகு இரண்டாவது இணைப்பு தோன்றும் வகையில் முதல் இணைப்பிற்குப் பிறகு இடத்தை உருவாக்க.
HTML
< div >< அ href = “https://linuxhint.com/create-html-file/” > HTML கோப்பை எவ்வாறு உருவாக்குவது? < / அ >
ஒரு HTML கோப்பை எவ்வாறு திருத்துவது?
நீங்கள் பார்க்க முடியும் என, முதல் இணைப்பின் வலது பக்கத்தில் இடம் உருவாக்கப்பட்டுள்ளது:
முறை 2: CSS ஐப் பயன்படுத்துதல்
CSS இல், நாங்கள் பயன்படுத்துவோம் ' விளிம்பு-வலது 'இரண்டு இணைப்புகளுக்கு இடையில் இடம் கொடுக்க சொத்து. ' விளிம்பு-வலது 'உறுப்பின் வலது பக்கத்திலிருந்து இடத்தைச் சேர்க்க சொத்து பயன்படுத்தப்படுகிறது. அதற்கான எதிர்மறை மதிப்புகளையும் நீங்கள் அமைக்கலாம்.
தொடரியல்
விளிம்பு-வலது சொத்தின் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது:
விளிம்பு-வலது : மதிப்புஎன்ற இடத்தில் ' மதிப்பு ”, உறுப்பின் வலது பக்கத்திலிருந்து விளிம்பை அமைக்கவும். உதாரணத்தைத் தொடர்வோம்.
உதாரணமாக
இங்கே நாம் பயன்படுத்துவோம் ' அ ” HTML இல் நாம் உருவாக்கிய இணைப்பை அணுக. அடுத்து, மார்ஜின்-ரைட் சொத்தின் மதிப்பை இவ்வாறு அமைக்கவும் 50px ”:
அ {விளிம்பு-வலது : 50px ;
}
முதல் இணைப்பின் வலது பக்கத்திலிருந்து ஸ்பேஸ் உருவாக்கப்பட்டது, அதை கீழே காணலாம்:
படி 4: செங்குத்தாக இரண்டு இணைப்புகளுக்கு இடையில் இடைவெளி கொடுங்கள்
இரண்டு இணைப்புகளுக்கு இடையே செங்குத்து இடைவெளி கொடுக்க, முதலில் இணைப்புகளை செங்குத்து வடிவத்தில் சீரமைக்கவும். இதைப் பயன்படுத்தி செய்யப்படும் ' தொகுதி 'மதிப்பு' காட்சி 'சொத்து மற்றும் பின்னர் பயன்படுத்துதல்' வரி உயரம் 'இரண்டு இணைப்புக் கோடுகளுக்கு இடையே இடைவெளி கொடுக்க சொத்து.
உதாரணமாக:
இங்கே, காட்சி சொத்தின் மதிப்பை '' என அமைப்போம். தொகுதி ” இணைப்புகளை செங்குத்தாக சீரமைக்க. பின்னர், வரி உயர சொத்தின் மதிப்பை அமைப்பதன் மூலம் இரண்டு இணைப்புகளுக்கு இடையில் இடைவெளியைக் கொடுங்கள் ' 80px ”:
அ {காட்சி : தொகுதி ;
வரி உயரம் : 80px ;
}
நீங்கள் பார்க்க முடியும் என, இடம் வரி-உயரம் சொத்து பயன்படுத்தி உருவாக்கப்பட்டது:
அவ்வளவுதான்! HTML & CSS இல் இரண்டு இணைப்புகளுக்கு இடையில் இடைவெளி கொடுக்கும் முறையை நாங்கள் விளக்கியுள்ளோம்.
முடிவுரை
' ”,” விளிம்பு-வலது ', மற்றும் ' வரி உயரம் ” CSS இன் பண்புகள் இரண்டு இணைப்புகளுக்கு இடையில் கிடைமட்ட மற்றும் செங்குத்து இடைவெளியைக் கொடுக்கப் பயன்படுகிறது. இதைப் பயன்படுத்தி, இணைப்புகளின் வலது மற்றும் இடது பக்கங்களிலிருந்து இடத்தை சரிசெய்யலாம். இந்த கட்டுரையில், இரண்டு வெவ்வேறு முறைகளைப் பயன்படுத்தி இரண்டு இணைப்புகளுக்கு இடையில் இடைவெளி கொடுப்பதற்கான செயல்முறையை நாங்கள் விளக்கியுள்ளோம் மற்றும் தொடர்புடைய எடுத்துக்காட்டுகளை வழங்கியுள்ளோம்.