CSS Frame Model Overview
- Previous Page CSS List
- Next Page CSS Padding
Ang CSS Box Model ay nagtututurang sa pamamaraan ng elemento na kahon sa paghawak ng nilalaman ng elemento,Padding,Border at Margin ng paraan na ito.
CSS Frame Model Overview
Ang pinakamalapit na bahagi ng elemento na kahon ay ang tunay na nilalaman, na inilalapit nang malapit ay ang padding. Ang padding ay nagpapakita ng background ng elemento. Ang gilid ng padding ay ang border. Ang gilid ng border ay ang margin, na sa pamamagitan ng default ay walang kulay, kaya hindi ito makakapag-likha ng anyo ng kahit anong elemento na nasa likod nito.
Mga tip:Ang background ay inilalagay sa lugar na binubuo ng nilalaman at padding, border.
Ang padding, border at margin ay opsyonal, ang default ay nulo. Gayunpaman, maraming elemento ay naisaayos ng user agent stylesheet para sa padding at margin. Maaaring pahinain ang mga browser style sa pamamagitan ng pagtatakda ng margin at padding ng elemento na nulo. Ito ay maaaring gawin nang hiwalay, o sa pamamagitan ng universal selector upang i-set ang lahat ng elemento:
* {
margin: 0;
padding: 0;
}
Sa CSS, ang width at height ay tumutukoy sa lapad at taas ng lugar ng nilalaman. Ang pagdagdag ng padding, border at margin ay hindi makakaapekto sa laki ng lugar ng nilalaman, ngunit magpapadagdagan sa kabuuan ng laki ng elemento.
Ipagpalagay na ang bawat gilid ng kahon ay may 10 pixel na padding at 5 pixel na padding. Kung nais na ang elemento na kahon ay umabot sa 100 pixel, kailangan na itong set ang lapad ng nilalaman sa 70 pixel, tingnan ang imahe sa ibaba:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
Mga tip:Ang padding, border at margin ay maaaring ilagay sa lahat ng gilid ng isang elemento, o maaring ilagay sa hiwalay na gilid.
Mga tip:Ang pagkakaroon ng negatibong halaga ng padding ay maaari, at sa maraming kaso, kinakailangan ang negatibong halaga ng padding.
Browser Compatibility
Kapag na-set na ang wastong DTD para sa pahina, karamihan sa mga browser ay magpapakita ng nilalaman ayon sa itaas na imaheng itinala. Gayunpaman, ang pagpapakita ng IE 5 at 6 ay hindi tama. Ayon sa W3C na mga tuntunin, ang espasyo na tinatanggap ng nilalaman ng elemento ay inilagay sa pamamagitan ng attribute na width, habang ang padding at border na nasa paligid ng nilalaman ay naisaayos nang hiwalay. Hindi naman masama, ang IE5.X at 6 ay gumagamit ng sariling modelo na hindi standard sa modong kakaiba. Ang attribute na width ng mga browser na ito ay hindi ang lapad ng nilalaman, kundi ang kabuuan ng lapad ng nilalaman, padding at border.
Although there are methods to solve this problem. But the best solution at present is to avoid this problem. That is, do not add inner padding with specified width to the element, but try to add inner padding or outer padding to the parent element and child element of the element.
Term Translation
- element: element.
- padding: inner padding, also known as fill in some materials.
- border: border.
- margin: outer margin, also known as blank or blank edge in some materials.
At codew3c, we uniformly call padding and margin inner padding and outer padding. The blank space within the border is the inner padding, and the blank space outside the border is the outer padding, which is easy to remember:):
- Previous Page CSS List
- Next Page CSS Padding
