Jassif Team Institution

CSS விளிம்புகள்

CSS விளிம்பு பண்புகள், வரையறுக்கப்பட்ட எல்லைகளுக்கு வெளியே, உறுப்புகளைச் சுற்றி இடைவெளியை உருவாக்கப் பயன்படுகின்றன.

விளிம்புகள் ஒரு உறுப்பின் எல்லைக்கும் சுற்றியுள்ள உறுப்புகளுக்கும் இடையிலான தூரத்தை வரையறுக்கின்றன.

CSS உடன், விளிம்புகள் மீது உங்களுக்கு முழு கட்டுப்பாடு உள்ளது. CSS இல் ஒரு உறுப்பின் ஒவ்வொரு பக்கத்திற்கும் (மேல், வலது, கீழ் மற்றும் இடது) விளிம்பை அமைக்கும் பண்புகள் உள்ளன, மேலும் அனைத்து விளிம்பு பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கும் சுருக்கப்பண்பும் உள்ளது.

விளிம்பு - தனிப்பட்ட பக்கங்கள்

ஒரு உறுப்பின் ஒவ்வொரு பக்கத்திற்கும் விளிம்பைக் குறிப்பிட CSS க்கு பண்புகள் உள்ளன:

• margin-top - ஒரு உறுப்பின் மேல் விளிம்பை அமைக்கிறது
• margin-right - ஒரு உறுப்பின் வலது விளிம்பை அமைக்கிறது
• margin-bottom - ஒரு உறுப்பின் கீழ் விளிம்பை அமைக்கிறது
• margin-left - ஒரு உறுப்பின் இடது விளிம்பை அமைக்கிறது

அனைத்து விளிம்பு பண்புகளுக்கும் பின்வரும் மதிப்புகள் இருக்கலாம்:

• auto - உலாவி விளிம்பைக் கணக்கிடுகிறது
• length - px, pt, cm, போன்றவற்றில் விளிம்பைக் குறிப்பிடுகிறது
• % - கொண்டிருக்கும் உறுப்பின் அகலத்தின் % இல் விளிம்பைக் குறிப்பிடுகிறது
• inherit - விளிம்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது

எடுத்துக்காட்டு

ஒரு <p> உறுப்பின் நான்கு பக்கங்களுக்கும் வெவ்வேறு விளிம்புகளை அமைக்கவும்:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

விளிம்பு - சுருக்கப்பண்பு

குறியீட்டை சுருக்கமாக்க, அனைத்து விளிம்பு பண்புகளையும் ஒரே அறிவிப்பில் குறிப்பிட முடியும்.

margin பண்பு பின்வரும் தனிப்பட்ட விளிம்பு பண்புகளுக்கான சுருக்கப்பண்பாகும்:

• margin-top
• margin-right
• margin-bottom
• margin-left

சுருக்கப்பண்பு எடுத்துக்காட்டுகள்

நான்கு மதிப்புகள்

p {
  margin: 25px 50px 75px 100px;
}

மூன்று மதிப்புகள்

p {
  margin: 25px 50px 75px;
}

இரண்டு மதிப்புகள்

p {
  margin: 25px 50px;
}

ஒரு மதிப்பு

p {
  margin: 25px;
}

auto மதிப்பு

அதன் கொள்கலனுக்குள் உறுப்பை கிடைமட்டமாக மையப்படுத்த, margin பண்பை auto என அமைக்கலாம்.

உறுப்பு குறிப்பிட்ட அகலத்தை எடுத்துக்கொள்ளும், மீதமுள்ள இடம் இடது மற்றும் வலது விளிம்புகளுக்கு இடையே சமமாகப் பிரிக்கப்படும்.

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

inherit மதிப்பு

விளிம்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறப்படுவதற்கு, margin பண்பை inherit என அமைக்கலாம்.

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

பயிற்சி

div {
  width: 200px;
  margin:    ;
}

அனைத்து CSS விளிம்பு பண்புகள்