نموذج الحاوية: الهوامش في CSS

رعيت النص الداخلي في نطاق الهوامش والجدار والمنطقة المحتوية. أكثر الخصائص بسيطة للتحكم في هذا النطاق هي الخاصية padding.

The CSS padding attribute defines the blank area between the element border and the element content.

CSS padding Qalib

The CSS padding attribute defines the inner margin of an element. The padding attribute accepts length values or percentage values but does not allow negative values.

For example, if you want all h1 elements to have a 10-pixel inner margin on all sides, you just need to do this:

h1 {padding: 10px;}

You can also set the inner margin of each side in the order of top, right, bottom, and left, and each side can use different units or percentage values:

h1 {padding: 10px 0.25em 2ex 20%;}

Single side inner margin properties

Also, the four properties below can be used separately to set the top, right, bottom, and left inner margins:

As you may have guessed, the following rule has the same effect as the shorthand rule above:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Percentage values of inner margin

As mentioned earlier, percentage values can be used to set the inner margin of an element. Percentage values are calculated relative to the parent element's width, just like the outer margin. Therefore, if the parent element's width changes, they will also change.

The following rule sets the inner margin of the paragraph to 10% of the parent element's width:

p {padding: 10%;}

For example, if a paragraph's parent element is a div element, then its inner margin should be calculated based on the div's width.

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

Note:Top and bottom inner margins are consistent with left and right inner margins; that is, the percentage of the top and bottom inner margins is set relative to the parent element width, not relative to the height.

CSS inner margin example:

All inner margin properties in one declaration
This example demonstrates using shorthand properties to set all inner margin properties in one declaration, which can have one to four values.
Set bottom inner margin 1
This example demonstrates how to set the bottom inner margin of a cell using centimeter values.
Set bottom inner margin 2
This example demonstrates how to set the bottom inner margin of a cell using percentage values.
Set left inner margin 1
This example demonstrates how to set the left inner margin of a cell using centimeter values.
Set left inner margin 2
An example demonstrates how to set the left inner margin of a cell using percentage values.
设置右内边距 1
本例演示如何使用厘米值来设置单元格的右内边距。
设置右内边距 2
O'ng ichki qisqa margin 1
O'ng ichki qisqa margin 2
Yuqori ichki qisqa margin 1
Yuqori ichki qisqa margin 2
Bu misolda, o'nlik foiz qiymatlarini ichki qisqa marginni sozlash usulini ko'rsatiladi.

CSS ichki qisqa margin atributi

Atribut Tafsil
padding Qisqacha atribut. Ushbu atribut bir shartda elementning barcha ichki qisqa marginlarini sozлашdirish uchun ishlatiladi.
padding-bottom Elementning past ichki qisqa marginini sozлашdirish.
padding-left Elementning chap ichki qisqa marginini sozлашdirish.
padding-right Elementning o'ng ichki qisqa marginini sozлашdirish.
padding-top Elementning yuqori ichki qisqa marginini sozлашdirish.