CSS Margins

Үр дүнг харах

CSS Individual Sides

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

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

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

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

<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 200px;
  margin-left: 50px;
  background-color: yellow;
}
</style>

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

• margin: 20px 40px 80px;

1. дээрээс 20px
2. баруун болон зүүн талаас 40px
3. доороос 80px зай авна гэсэн үг юм.

<style>
div {
  border: 1px solid black;
  margin: 20px 40px 80px;
  background-color: yellow;
}
</style>

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

• margin: 20px 40px;

1. дээрээс болон доороос 20px
2. баруун болон зүүн талаас 40px зай авна гэсэн үг юм.

<style>
div {
  border: 1px solid black;
  margin: 20px 40px;
  background-color: yellow;
}
</style>

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

• margin: 40px;

1. Бүх талаас 40px зай авна гэсэн үг юм

<style>
div {
  border: 1px solid black;
  margin:40px;
  background-color: yellow;
}
</style>

Auto Value

Хэрэв та margin-д auto гэсэн утгыг зааж өгвөл элемент нь өөрт заасан өргөнийг авч агуулгын хамт голлох буюу баруун болон зүүн талаас ижил зайг автоматаар авах болно. /Хэвтээ тэнхлэгт/

<style>
div {
  width:350px;
  margin: auto;
  border: 3px solid yellow;
}
</style>

The inherit Value

CSS нь эцэг элементийн шинж чанарыг удамшуулж авч чадна.

<style>
.box{
  border:solid 10px rgba(12,72,0,0.8); 
  background-color:rgba(0,0,0,0.1);
  width:150px; height:150px; margin:25px;
}
div{
  width:inherit;
  height:inherit;  
  margin:inherit;
  background-color:inherit;
  border:inherit;
}
span{
  width:inherit;
  height:inherit;  
  margin:inherit;
  background-color:inherit;
  border:inherit;  
  display:inherit;  
  border-color:#3f9ce8;
}
</style>
</html>

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