Jassif Team Institution

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

விளிம்பு சுருக்கம் என்பது இரண்டு விளிம்புகள் ஒரே விளிம்பாக சுருக்கப்படும் போது ஆகும்.

உறுப்புகளின் மேல் மற்றும் கீழ் விளிம்புகள் சில நேரங்களில் இரண்டு விளிம்புகளில் பெரியதற்கு சமமான ஒரே விளிம்பாக சுருக்கப்படுகின்றன.

முதல் எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டில், <h1> உறுப்புக்கு 50px கீழ் விளிம்பு உள்ளது மற்றும் <h2> உறுப்புக்கு 20px மேல் விளிம்பு உள்ளது. எனவே, <h1> மற்றும் <h2> இடையே உள்ள செங்குத்து விளிம்பு மொத்தம் 70px (50px + 20px) ஆக இருக்கும். ஆனால் விளிம்பு சுருக்கம் காரணமாக, உண்மையான விளிம்பு 50px ஆக முடிகிறது:

h1 {
  margin-bottom: 50px;
}

h2 {
  margin-top: 20px;
}

இரண்டாவது எடுத்துக்காட்டு

பின்வரும் எடுத்துக்காட்டில், ஒவ்வொரு <p> உறுப்புக்கும் 30px மேல் விளிம்பு மற்றும் 30px கீழ் விளிம்பு உள்ளது. எனவே, <p> உறுப்புகளுக்கு இடையே உள்ள செங்குத்து விளிம்பு 60px (30px + 30px) ஆக இருக்க வேண்டும். இருப்பினும், விளிம்பு சுருக்கம் காரணமாக, உண்மையான விளிம்பு 30px ஆக முடிகிறது:

p {
  margin-top: 30px;
  margin-bottom: 30px;
}

பயிற்சி

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