← Хичээлүүд
🎨 HTML + CSS анхан шат
Хайрцгийн загвар
## Бүх элемент бол хайрцаг
CSS-д элемент бүр тэгш өнцөгт **хайрцаг**. Гаднаас нь дотогш:
1. **margin** — гадна зай (бусад элементээс)
2. **border** — хүрээ
3. **padding** — дотор зай (хүрээ ба агуулгын хооронд)
4. **агуулга** — `width` × `height`
```html
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 3px solid green;
margin: 30px;
border-radius: 10px;
background-color: orange;
}
</style>
<div class="box">Хайрцаг</div>
```
> 💡 `border: 3px solid green` нь гурван утгыг нэг дор өгдөг: зузаан, хэлбэр, өнгө.
> 🧩 Бодлого: **HTML/CSS → Түвшин 8**
💡 Уншсан хичээлээ тэмдэглэж, бодлого бодож оноо цуглуулах бол үнэгүй бүртгүүлээрэй эсвэл нэвтэрнэ үү.