Jassif Team Institution

CSS Box Sizing

CSS box-sizing சொத்து ஒரு உறுப்பின் அகலம் மற்றும் உயரத்தை எவ்வாறு கணக்கிடுவது என வரையறுக்கிறது: padding மற்றும் border ஆகியவை கணக்கீட்டில் சேர்க்கப்பட வேண்டுமா இல்லையா.

இயல்பாக, ஒரு உறுப்பின் அகலம் மற்றும் உயரம் இவ்வாறு கணக்கிடப்படுகிறது:

• width + padding + border = உறுப்பின் உண்மையான அகலம்
• height + padding + border = உறுப்பின் உண்மையான உயரம்

இதன் பொருள்: நீங்கள் ஒரு உறுப்பின் width/height ஐ அமைக்கும்போது, உறுப்பு நீங்கள் அமைத்ததை விட பெரியதாகத் தோன்றும் (ஏனெனில் உறுப்பின் border மற்றும் padding ஆகியவை உறுப்பின் குறிப்பிடப்பட்ட width/height க்கு சேர்க்கப்படும்).

Example

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

The CSS box-sizing Solution

box-sizing சொத்து ஒரு உறுப்பின் மொத்த அகலம் மற்றும் உயரத்தில் padding மற்றும் border ஆகியவற்றைச் சேர்க்க அனுமதிக்கிறது.

நீங்கள் ஒரு உறுப்பில் box-sizing: border-box; அமைத்தால், padding மற்றும் border ஆகியவை அகலம் மற்றும் உயரத்தின் கணக்கீட்டில் சேர்க்கப்படும்:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Universal Box Sizing

box-sizing: border-box; பயன்படுத்துவதன் முடிவு மிகவும் சிறப்பாக இருப்பதால், பல உருவாக்குநர்கள் தங்கள் பக்கங்களில் உள்ள அனைத்து உறுப்புகளும் இந்த வழியில் செயல்பட வேண்டும் என்று விரும்புகின்றனர்.

box-sizing: border-box; பயன்படுத்துவது பாதுகாப்பானது மற்றும் அறிவார்ந்தது:

* {
  box-sizing: border-box;
}

Exercise

CSS Box Sizing Property

பின்வரும் அட்டவணை CSS box sizing சொத்தை விவரிக்கிறது: