Frame Model: CSS Mga-linya
Ang luwang na nakapalibot sa labi ng elemento ng frame ay ang mga-linya. Ang pagtatakda ng mga-linya ay magbibigay ng dagdag na 'luwang' sa labas ng elemento.
Ang pinakasimpleng paraan upang itakda ang mga-linya ay gamitin ang mga-linya na katangian, na tatanggapin ang anumang yunit ng sukat, mga porsyento o kahit negatibong halaga.
CSS margin 属性
Ang pinakasimpleng paraan upang itakda ang mga-linya ay gamitin ang Ang mga-linya na katangian.
Ang mga-linya na katangian ay tatanggapin ang anumang yunit ng sukat, maaaring ito ay pixels, inches, millimeters o em.
Maaaring itakda ang mga-linya bilang auto. Ang mas karaniwang gawain ay itakda ang haba ng mga-linya. Ang pahayag na ito ay nagtatakda ng 1/4 pulgada na luwang sa gilid ng h1 na elemento:
h1 {mga-linya : 0.25in;}
Ang mga halimbawa na ito ay nagtataya ng magkakaibang mga hangganan ng labas ng h1 na elemento, ang mga ginamit na yunit ng sukat ay pixels (px):
h1 {mga-linya : 10px 0px 15px 5px;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
mgaan: itaas kanang ilalim kaliwang
Higit pa, maaari ring itakda ang porsyento ng halaga para sa malayuan:
p {mgaan : 10%;}
Ang porsyento ay kalkulahin ayon sa width ng magulang elemento. Ang halimbawa na ito ay nagtatakda ng 10% ng malayuan para sa elemento p ayon sa width ng magulang elemento.
Ang default na halaga ng margin ay 0, kaya walang malayuan kung wala itong itakda ang isang halaga. Subalit, sa aktwal, ang mga browser ay nagbibigay ng predefined na estilo para sa maraming elemento, ang malayuan ay kasama dito. Halimbawa, sa mga browser na sumusuporta sa CSS, ang malayuan ay magbibigay ng 'walang laman na mga linya' sa itaas at ilalim ng bawat elemento na p. Kaya, kung walang itakda ang malayuan para sa elemento p, ang browser ay maaaring mag-aplay ng isang malayuan. Ngayon, kung mayroon kang espesyal na itakda, ay masasauli ang default na estilo.
Pagkopya ng halaga
Tandaan mo ba? Naminang nagsalita sa dalawang naunang seksyon tungkol sa pagkopya ng halaga. Sa susunod, ipinapaliwanag namin kung paano gamitin ang pagkopya ng halaga.
Minsan, magiging marami ang mga pinagkakabit na halaga:
p {mgaan: 0.5em 1em 0.5em 1em;}
Sa pamamagitan ng pagkopya ng halaga, hindi kailangan mong maulit ang mga bilang na iyon. Ang mga alituntunin na ito ay katumbas ng alituntunin sa ibaba:
p {mgaan: 0.5em 1em;}
Ang dalawang halaga na ito ay maaaring papalitan ang naunang 4 na halaga. Paano ginagawa ito? Ang CSS ay nagbigay ng mga alituntunin, na nagbibigay ng kapahintulutan para makapag-angkin ng mas mababang bilang ng halaga para sa malayuan. Ang alituntunin ay:
- Kung wala ang halaga ng kaliwang malayuan, gamitin ang halaga ng kanang malayuan.
- Kung wala ang halaga ng ilalim na malayuan, gamitin ang halaga ng itaas na malayuan.
- Kung wala ang halaga ng kanang malayuan, gamitin ang halaga ng itaas na malayuan.
Ang ilang larawan na ito ay nagbibigay ng mas madaling pagkaunawa nito:
Sa ibang salita, kung ang tatlong halaga ang itinakda para sa malayuan, ang ikaapat na halaga (ang kaliwang malayuan) ay kopyahin mula sa ikalawa na halaga (ang kanang malayuan). Kung mayroong dalawang halaga, ang ikaapat na halaga ay kopyahin mula sa ikalawa na halaga, ang ikatlong halaga (ang ilalim na malayuan) ay kopyahin mula sa unang halaga (ang itaas na malayuan). Ang huling kaso, kung may isang halaga lamang ang itinakda, ang tatlong iba pang malayuan ay kopyahin mula sa halaga (ang itaas na malayuan).
Ginagamit ang simpleng mekanismo na ito, kailangan lang mong itakda ang mga dapat na halaga, hindi dapat lahat ng 4 na halaga, halimbawa:
h1 {mgaan: 0.25em 1em 0.5em;} /* katumbas ng 0.25em 1em 0.5em 1em */
h2 {mgaan: 0.5em 1em;} /* katumbas ng 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* Equivalent to 1px 1px 1px 1px */
This method has a small drawback, and you will definitely encounter this problem. Suppose you want to set the top and left margins of the p element to 20 pixels, and the bottom and right margins to 30 pixels. In this case, you must write:
p {margin: 20px 30px 30px 20px;}
This is how you can get the result you want. Unfortunately, in this case, there is no way to reduce the number of values needed.
Let's look at another example. If you want all margins except the left margin to be auto (the left margin is 20px):
p {margin: auto auto auto 20px;}
Similarly, this is how you can get the effect you want. The problem is, typing these auto can be麻烦. If you just want to control the margin on a single edge of an element, please use the single edge margin property.
Single Edge Margin Properties
You can use a single edge margin property to set the margin value for a single edge of an element. Suppose you want to set the left margin of the p element to 20px. You don't have to use margin (you need to type many auto), but you can use the following method:
p {margin-left: 20px;}
You can use any of the following properties to set the margin on the corresponding side without affecting all other margins:
You can use multiple such single edge attributes in one rule, for example:
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
Of course, for this situation, using margin may be easier:
p {margin: 20px 30px 30px 20px;}
Whether using a single edge attribute or using margin, the result is the same. Generally speaking, if you want to set the margin for multiple sides, using margin will be easier. However, from the perspective of document display, actually using either method is not important, so you should choose the method that is easier for you.
Tips and Comments
Tip:Netscape and IE define the default margin (margin) value for the body tag as 8px. However, Opera is not like this. On the contrary, Opera defines the default value of internal padding (padding) as 8px, so if you want to adjust the edge parts of the entire website and display them correctly in Opera, you must customize the padding of the body.
CSS Margin Example:
- Set the left outer margin of the text
- 本例演示如何设置文本的左外边距。
- 设置文本的右外边距
- 本例演示如何设置文本的右外边距。
- 设置文本的上外边距
- 本例演示如何设置文本的上外边距。
- 设置文本的下外边距
- 本例演示如何设置文本的下外边距。
- 所有的外边距属性在一个声明中。
- 本例演示如何将所有的外边距属性设置于一个声明中。
CSS 外边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
