CSS Box Sizing

CSS Box Sizing

Mga rekomendasyon ng kurso: box-sizing CSS

Attribute na nagbibigay ng kapahintulutan na kasama ang padding (pamamahagi) at border sa kabuuang lapad at taas ng elemento.

Kung hindi tinatakda ang CSS box-sizing attribute

  • Sa pangkaraniwang kaso, ang pagtutuos ng lapad at taas ng elemento ay gayon:
  • width + padding + border = ang tunay na lapad ng elemento

height + padding + border = ang tunay na taas ng elemento

Ipinaliwanag nito: Kapag tinatakda mo ang lapad o taas ng elemento, karaniwang mas malaki ang elemento na mukhang iyon ( dahil ang border at padding ng elemento ay kasama sa tinakdang lapad at taas ng elemento).

Ang ilalim na larawan ay nagpakita ng dalawang <div> na elemento na may parehong itinakdang lapad at taas:
Ang div na ito ay mas maliit
（lapad ay 300px，taas ay 100px）。
Ang div na ito ay mas malaki

（lapad din ay 300px，taas ay 100px）。

Example

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

Try It Yourself

box-sizing Ang dalawang <div> na elemento sa itaas ay may magkakaibang laki sa huling resulta ( dahil ang div2 ay naka-set ng padding):

Attribute na lutasin ang problema na ito.

box-sizing Kung gamit ang CSS box-sizing attribute

Ang attribute na ito ay nagbibigay ng kapahintulutan na kasama ang padding at border sa kabuuang lapad at taas ng elemento. box-sizing: border-box;Kung may itinakda ang padding at border sa elemento:

Ngayon ang dalawang div ay may parehong laki!
Hooray!

Ang halimbawa na ito ay katulad ng nakaraang halimbawa, ang dalawang <div> na elemento ay na-set na box-sizing: border-box;：

Example

.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;
}

Try It Yourself

Dahil sa paggamit box-sizing: border-box; to such an extent that many developers wish that all elements on the page could work in this way.

The following code ensures that all elements can be adjusted in this more intuitive way. Many browsers have already started using the effect for many form elements box-sizing: border-box;(but not all - that's why input and textarea look different when width: 100%;).

It is safe and wise to apply it to all elements:

Example

* {
  box-sizing: border-box;
}

Try It Yourself

CSS Box Sizing Attribute

Attribute Description
box-sizing Define the calculation method for the width and height of elements: whether they should include padding and borders.