CSS Padding

Үр дүнг харах

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

Padding Individual Sides

CSS нь padding-г тал бүрээс нь тодорхойлох шинж чанаруудтай байдаг.

• margin-left
• margin-right
• margin-top
• margin-bottom

Бүх padding-н шинж чанарууд дараах утгатай байна.

• % - padding авах зайг %-аар зааж өгч болно.
• урт - px, pt, cm, гэм мэт хэмжих нэгжээр зааж өгч болно.
• inherit - padding зайг эцэг элементээс удамшуулж болно.

<style>
div {    
    padding-top: 30px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 70px;
    border: 2px solid orange;
}
</style>

Padding Shorthand Property

Кодыг богиносгохын тулд бүх шинж чанарыг padding-д зааж өгч болно.

• padding: 30px; 50px; 50px; 70px; энэ нь доорх шинж чанартай адил үр дүнг үзүүлнэ.

1. padding-top: 30px;
2. padding-right: 50px;
3. padding-bottom: 50px;
4. padding-left: 70px;

<style>
div {    
    padding: 30px; 50px; 50px; 70px;
    border: 2px solid orange;
}
</style>

Хэрэв padding дараах гурван утгатай байвал.

padding: 30px; 50px; 50px;

• padding-top: 30px;
• padding-right: 50px болон padding-left: 50px;
• padding-bottom: 70px; зай авч байна гэсэн үг юм.

<style>
div {    
    padding: 30px 50px 70px;
    border: 2px solid orange;
}
</style>

Хэрэв padding дараах хоёр утгатай байвал.

padding: 30px; 50px;

• padding-top: 30px; болон padding-bottom:30px;
• padding-right: 50px болон padding-left: 50px; px зай авч байна гэсэн үг юм.

<style>
div {    
    padding: 30px 50px;
    border: 2px solid orange;
}
</style>

Хэрэв padding дараах нэг утгатай байвал.

padding: 30px; 4-н талаас адил 30px зай авсан байна гэсэн үг юм.

<style>
div {    
    padding: 30px;
    border: 2px solid orange;
}
</style>

Padding болон Width элемент

CSS-д width шинж чанар нь тухайн элементийн агуулж буй контентийн өргөнийг заадаг. Харин padding, margin болон border нь тухайн элементэд хамаарна.

Иймээс сайтын загвараа хийх явцдаа контентийн өргөн дээр padding, margin болон border-г нэмж тооцох хэрэгтэй.

<style>
div.s1 {    
    width: 400px;
    background-color: orange;
}
div.s2 {    
    width: 400px;
    padding: 30px;
    background-color: yellow;
}
</style>

padding-н хэмжээнээс үл хамааран нийт 400px зайд багтаах шаардлагатай болбол box-sizing шинж чанарыг ашиглаж болно.

<style>
div.s1 {    
    width: 400px;
    background-color: orange;
}
div.s2 {    
    width: 400px;
    padding: 30px;
    box-sizing: border-box;
    background-color: yellow;
}
</style>

Сэтгэгдэлүүд