Тодорхойлолт

Талбарын утгыг элементийн оронд баруун талд тохируулна уу. Талбарыг элементийн хүрээний дотоод ирмэгээс түүнийг хүрээлж буй илэрхий тэгш өнцөгт хүртэл дууддаг (Зураг 1).

Дүүргэлтийн хүч нь элементийн бүх талуудын хувьд дэвсгэрийн утгыг хоёр удаа тохируулах, эсвэл зөвхөн заасан талуудын утгыг тохируулах боломжийг олгодог.

Синтакс

дэвсгэр: [утга | vіdsotki] (1, 4) | өвлөн авах

Үнэ цэнэ

Нэг, хоёр, гурав эсвэл хэд хэдэн утгыг ялж, асуудлыг хооронд нь хувааж болно. Тоо хэмжээ хэлбэрээр байршуулах үр нөлөөг Хүснэгтэнд үзүүлэв. нэг.

Талбаруудын утгыг пикселээр (px), зуутын нэгээр (%) эсвэл CSS-д зөвшөөрөгдсөн бусад нэгжээр зааж өгч болно. Өв залгамжлалын үнэ цэнэ нь эцгээс буурах болно гэдгийг харуулж байна. Утгад талбаруудыг зааж өгөхдөө элементийн эцгийн өргөний дагуу утгыг харгалзан үзнэ.

HTML5 CSS2.1 IE Cr Op Sa Fx

Үр дүн энэ өгзөгЗурагт үзүүлэв. 2.

Цагаан будаа. 2. Өтгөрүүлэх дэвсгэр

Объект загвар

document.getElementById("elementID ").style.padding

хөтчүүд

Internet Explorer 7.0 хүртэлх хувилбар нь удамших утгыг дэмждэггүй.

Хэсгийн өмнө бид захын зай (талбар) ба дүүргэх (дотор) зэрэг CSS хүчийг тохируулсан. Одоо тэднийг илүү нарийвчлан авч үзээд ямар өмхий үнэрийг харж, онцгой мэт санагддагийг харцгаая.

Та элементүүдийн хоорондох зайг ижил аргаар, өөр аргаар үүсгэж болно, гэхдээ бас дүүргэх - блокийн ирмэг хүртэл, захын зай - нэг блокоос нөгөө рүү, блокуудын хооронд. Эхний өгзөгний гэрчлэлийн дэлгэцийн агшин дээр:

Дүүргэлт нь блокуудын хоорондох зайг үүсгэдэг бол захын зай нь блокуудын хоорондох зайг үүсгэдэг

Чухамдаа тэр CSS алхамын талбарууд хоорондоо холилдсон байдаг ч заримдаа кодыг дахин харахгүйгээр үүнийг таних боломжгүй байдаг тул ийм эрх мэдлийн туслалцаатайгаар зогсоход хүргэдэг. Энэ нь хүрээ, эсвэл газар нь дэвсгэр блок байгаа бол оргил үед traplyatsya.

Элементийн арьсны тал дээр захын зай эсвэл CSS алхамыг тохируулахын тулд та доромжилсон хүчийг ашиглах хэрэгтэй:

Алхамууд:

• дэвсгэр дээд: утга;
• дэвсгэр-баруун: утга;
• дэвсгэр-доод: утга;
• дэвсгэр-зүүн: утга;

Талбарууд:

• захын дээд: утга;
• баруун захын зай: утга;
• захын доод: утга;
• зүүн талын зах: утга;

Утгыг аль ч CSS нэгжээр оруулж болно - px, em, % гэх мэт. Өгзөг: захын дээд хэсэг: 15px .

Түүнчлэн, энэ нь аль хэдийн баялаг гол юм товчлолын захын зай ба padding css. Хэрэв та элементийн дөрвөн талд талбар эсвэл оролтыг зааж өгөх шаардлагатай бол okremo-ийн арьсны хажуугийн хүчийг заавал бичиж болохгүй. Тэмцэхэд бүх зүйл илүү хялбар байдаг: 1, 2, 3 эсвэл 4 утгын дарааллаар маржин ба дүүргэлтийг зааж өгч болно. rozpodіlyayutsya nalashtuvannya гэж Vіd kіlkostі үнэ цэнэ унах:

• 4 утга: элементийн бүх талын дэвсгэрийг дараах дарааллаар тохируулна: дээд, баруун гар, доод, ар тал: padding: 2px 4px 5px 10px;
• 3 утга: арын дэвсгэрийг дээд талд нь, дараа нь зүүн, баруун талд нэг удаа, дараа нь доод талд дэвсгэрийг тохируулна: padding: 3px 6px 9px;
• 2 утга: толгойн ар тал дээр дээд ба доод талыг нэгэн зэрэг байрлуулж, дараа нь - зүүн ба баруун талд нэгэн зэрэг: дэвсгэр: 6px 12px;
• 1 утга: элементийн бүх талд ижил алхмуудыг тохируулах: padding: 3px;

Эдгээр дүрмүүд нь CSS-ийн маржинд хамаарна. Маржийн хувьд та сөрөг утгыг (жишээлбэл, -3px) өөрчлөх боломжтой гэдгийг санаарай, энэ нь заримдаа илүү харанхуй байж болно.

Хураах зах

Нөхцөл байдлыг харуулна уу: хоёр блок элемент - нэгээс дээш нэг ба маржин талбарыг тохируулна уу. Дээд талын хайрцгийг маржин: 60px, доод тал нь 30px гэж тохируулсан. Хоёр талбар огтлолцож, хоёр элемент зүгээр л мөргөлдөж, үүний үр дүнд блок хоорондын зай 90 пиксел хүрдэг гэж үзэх нь логик юм.

Prote үүнийг өөрөөр хий. Үнэн хэрэгтээ, ийм нөхцөлд нөлөөлөл илэрдэг бөгөөд үүнийг нуралт гэж нэрлэдэг бөгөөд хэрэв элементийн хоёр талбар зэргэлдээ байвал тэдгээрийн хамгийн том нь сонгогдоно. Өгзөг дээр элементүүдийн хооронд 60 пиксел хүртэл бага зай бий.

Хураах зах нь зөвхөн элементүүдийн дээд ба доод талбарт хамаарах бөгөөд баруун болон зүүн талын талбаруудын өмнө харагдахгүй. Цоорхойн үлдэгдэл утгыг янз бүрийн нөхцөлд янз бүрийн аргаар тооцдог.

• Хэрэв маржингийн зөрчилтэй утга эерэг байвал талбарын дэд багийн өргөтгөл илүү их утга болж өснө.
• Хэрэв утгуудын аль нэг нь сөрөг байвал талбайн хэмжээг тооцоолохын тулд утгуудын нийлбэрийг авах шаардлагатай. Жишээлбэл, 20px ба -18px-ийн утгуудтай бол талбарыг өргөтгөх цаг:
  20 + (-18) = 20 - 18 = 2 пиксел.
• Үнэн хэрэгтээ утгууд нь сөрөг, эдгээр тоонуудын модулийг тэнцүүлж, модулиас их (мөн сөрөг тоонуудын хамгийн бага нь) тоог сонгосон. Жишээ нь: -6px ба -8px талбарын утгыг тааруулах шаардлагатай. por_vnyuvanih тооны модулиуд 6 ба 8 vodpovidno нэмэгдсэн байна. 6-8 шиг сонсогдож байна. Podbag rozmіr талбар dorіvnyuє -8 pіkselіv.
• Зарим тохиолдолд, хэрэв утгыг заасан бол өөр өөр нэгжүүд CSS, өмхий үнэр нэг хүртэл авчирдаг, дараа нь тэд харьцуулж, илүү үнэ цэнийг сонгох.
• Хүүхдийн элементүүдийн захын зай нь илүү тод харагдаж байна: хэрвээ насчадкагийн хувьд илүү том, эцгийн хувьд бага бол давуу эрх танд олгоно. Ийнхүү эцгийн дээд доод усалгааны өсөлт нөхөөсөөр өгөгдсөнөөр ийм болно. Хэнтэй ч харсан чи аав болохгүй.

Tsya vlastіst mozhe ээж vіd нэг нь chotirioh утга.

Зураг дээр цайвар саарал өнгө нь дэвсгэрийн хүчийг харуулсан бүсийг илтгэнэ.

1. Хүсэлтийн дагуу Чотирио гэсэн утгатай(5px 10px 15px 20px ) - дотоод шатыг байрлуулах дараалал нь: Топ(5px)- Зөв(10px) - доод(15px)- Зүүн(20px). Дотоод оролтыг нэг дуугаар байрлуулах дарааллыг санахын тулд та англи үгийг сонгож болно TRо BLэ(де Т-дээд, Р- зөв, Б- доод, Л- Зүүн).


2. Хүсэлтийн дагуу гурвалсан утга(5px 10px 15px ) - дотоод шатыг байрлуулах дараалал нь: Топ(5px)- Баруун зүүн(10px) - доод(15px).


3. Хүсэлтийн дагуу хоёр утга(5px 10px ) - эхний утга (5px ) нь элементийн дээд ба доод хэсгийн дотоод хандалтын хэмжээг, нөгөө (10px ) утга - элементийн зүүн гар, баруун гар талын дотоод хандалтыг тохируулах явдал юм.


4. Хүсэлтийн дагуу нэг утга(5px) - хажуугийн дотоод хандалт нь ижил хэмжээтэй байх болно - 5px.

Хөтөчүүдийн дэмжлэг

CSS синтакс:

JavaScript синтакс:

object.style.padding = "5px"

Якости үнэ цэнэ

CSS хувилбар

буурах

Хөдөлгөөнт дүрс

Өгзөг використання

Энэ заавар нь танд үүнийг илүү сайн ойлгох боломжийг олгох явдал юм CSS-ийн хүчхил, дэвсгэр, ирмэг гэх мэт. Эрх мэдэл нь жижиглэн худалдаачдад элементүүдийг шугамын хажуу талд байрлуулахад тусална.

div болон бага зэрэг хүчин чадал, дэвсгэр болон хүрээ үүсгэцгээе.

Эрчим хүчний дэвсгэр

CSS-ийн дүүргэгчийн хүч нь элементийн хүрээ нэг газар байгаа эсэхийг тодорхойлдог. Та йогийг дараах байдлаар тодорхойлж болно.

• дүүргэгч дээд: 10px;
• баруун талын дэвсгэр: 10px;
• Доод талын дэвсгэр: 10px
• дэвсгэр-зүүн: 10px

Tsey рекордыг богиносгож болно:

• дүүргэх:25px 50px 75px 100px;
  • араатан 25px
  • баруун гар 50px
  • доод 75px
  • zliva 100px
• дүүргэх: 25px 50px 75px;
  • араатан 25px
  • баруун ба зүүн гартай 50px
  • доод 75px
• дүүргэх: 25px 50px;
  • дээд ба доод 25px
  • баруун ба зүүн гартай 50px
• дүүргэх: 25px;
  • бүгд 25px

Тэмдэглэл: Дүүргэлтийн утгыг элементийн өргөнд тохируулж, элементийн арын дэвсгэрт тохируулна.

Үгүй бол бидэнд div-1 ангитай div элемент байгаа бололтой:

Div.div-1(өргөн:150px; дэвсгэр: 25px;)

Элементийн өргөнийг зүүн болон баруун дэвсгэр дээр нэмэх хөтөч. Үүний үр дүнд бид 200px хилийн элементийг авдаг.

Эрчим хүчний хил

Хилийн CSS хүч нь хилийн хэв маяг, өнгийг тодорхойлох боломжийг танд олгоно.

хилийн өргөн

Хилийн өргөний хүчийг кордоны өргөнд тохируулна. Өргөнийг пикселээр эсвэл урьдчилан тодорхойлсон утгуудын аль нэгний тусламжтайгаар тохируулна: нимгэн (нимгэн), дунд (дунд) эсвэл зузаан (зузаан).

хилийн өнгө

хилийн-өнгө zastosovuetsya хүч cordon өнгө оноосон. Өнгөийг дараахь байдлаар хуваарилж болно.

• нэр - өнгийг нэрлэ, жишээлбэл, "улаан"
• RGB - RGB утгыг тохируулна, жишээ нь "rgb(255,0,0)"
• Hex - hex утгыг харуулдаг, жишээ нь "#ff0000"

хилийн хэв маяг

• цэгтэй: Их хэмжээний кордон
• тасархай: Цэгтэй кордоныг илэрхийлнэ
• хатуу: Гарын үсэг зурсан кордон
• давхар: Хоёр кордоныг заана Тэдний хооронд хилийн өргөний утгын дагуу хэвтэнэ
• ховил: Кордоны сэтгэгдэлийн хэмжээг харуулна
• нуруу: Эзлэхүүний хаван кордоныг харуулдаг.
• оруулах: Блок нь шахалтаар цохигдохоор кордоныг тогтооно.
• эхлэл: Блок нь хаван руу цохиулахын тулд кордоныг тогтооно

Та элементүүдийн хоорондох хүчийг богиносгосон дарааллаар бичиж болно.

Div.div-2( хүрээ: 1px хатуу #ccc; )

Хүч чадлын хэмжээ

CSS-ийн захын хүч нь үүнийг элементийн хажуу талд тохируулдаг. Margin нь элементийн уртыг (Хилийн нэр) тохируулдаг. Маржин нь үнсний өнгийг харж чаддаггүй бөгөөд үргэлж тунгалаг болдог.

Та ийм элементэд маржингийн утгыг оноож болно:

• захын дээд: 100px;
• доод захын зай: 100px;
• баруун захын зай: 50px;
• зүүн талын зах: 50px;

Tsey рекордыг богиносгож болно:

• захын зай:25px 50px 75px 100px;
  • дээд захын зай 25px
  • баруун захын зай 50px
  • доод захын зай 75px
  • zliva margin 100px
• захын зай: 25px 50px 75px;
  • дээд захын зай 25px
  • баруун болон зүүн гар талын захын зай 50px
  • доод захын зай 75px
• захын зай: 25px 50px;
  • дээд ба доод захын зай 25px
  • баруун болон зүүн гар талын захын зай 50px
• захын зай: 25px;
  • бүх chotiri захын зай 25px

Түгжээний ард байгаа захын утгыг ашигласнаар та блокыг төв хэсэгт хэвтээ байдлаар өргөжүүлж болно.

CSS дэвсгэрийн хүч нь элементийн дундах элементийн дунд хэсгийн тохиргооноос хамаарна

CSS Синтакс дүүргэлт

дэвсгэр: баруун дээд доод зүүн;

• дээд - элементийн дээд хил рүү орох;
• баруун - зөв хоорондын элемент рүү нэвтрэх;
• доод - элементийн доод хил рүү орох;
• зүүн - элементийн зүүн хил рүү нэвтрэх;

Утгыг ихэвчлэн пикселээр тохируулдаг. Мөн утгууд болон бусад хүчинтэй CSS нэгжүүдийг зааж өгөхийг зөвшөөрнө.

Тайлбар 1
Нэгээс илүүгүй утгыг оруулахыг зөвшөөрнө. Ургац нь утгын тооноос хамаарч өөр өөр байх болно:

• Хэрэв 3 утгыг өгсөн бол эхний утгыг араатан, нөгөөг нь зүүн ба баруун гартай, гурав дахь нь доод талаас нь тогтооно.
• Хэрэв 2 утгыг өгсөн бол эхний утгыг дээд ба доод талд, нөгөөг нь зүүн, баруун гарт тохируулна.
• Хэрэв 1 утгыг тохируулсан бол бүх талд ижил хандалтыг тохируулна. Жишээлбэл:

дүүргэх: 10px 10px 10px 10px; Та илүү нягт суулгаж болно:дүүргэх: 10px

Тайлбар 2
CSS захын хувьд дүүргэлтийн сөрөг утгыг зөвшөөрөхгүй.

Мөн padding нь 4 CSS цахилгаан шугамтай. Тэднээс арьс шууд yakys нь vydpovidaє.

• padding-left - элементийн зүүн хилийн дэвсгэр;
• padding-right – элементийн баруун хүрээг дүүргэх;
• padding-top - элементийн дээд хил рүү орох;
• padding-bottom - элементийн зүүн хилийн дэвсгэр;

Жишээлбэл

дүүргэх: 3px 5px 7px 10px; Эсвэл та тайланг тохируулж болно:дэвсгэр-зүүн: 10px баруун талын дэвсгэр: 5px; дүүргэгч дээд: 3px; Доод талын дэвсгэр: 7px

Элементийн дунд хэсэгт өөр өөр алхмуудаар түрхэнэ

Жишээ 1. Тагийн дундах бичвэрт хандах

Тэг дүүргэлттэй нөөц (дөөрөг: 0px)

Кордоныг ижил нээлхийтэй өгзөг (дотоож: 10px)

Янз бүрийн жийргэвчтэй нөөцлөх (дуулгах: 10px 0px 0px 30px)

Тэнхлэг нь хажуу талдаа байгаа юм шиг харагдаж байна:

Тэг дүүргэлттэй нөөц (дөөрөг: 0px)

Кордоныг ижил нээлхийтэй өгзөг (дотоож: 10px)

Янз бүрийн жийргэвчтэй нөөцлөх (дуулгах: 10px 0px 0px 30px)

Жишээ 2. Объектийн дунд байрлах объект руу нэвтрэх