جعبه ها و قاب ها عناصری برای جداسازی المان های HTML از یکدیگر هستند. اگر المان ها را به صورت چند لایه تصور کنید، لایه اول محتوای المان است و لایه بعدی بردار یا قابی است که دور آن کشیده شده است. این قاب در حالت پیش فرض نامرئی بوده و ما با دستور border می توانیم آن را ظاهر کنیم. لایه بعدی لایه پدینگ یا فضایی است که بین قاب و محتوا قرار دارد و در واقع این دو را از هم جدا می کند. لایه دیگر هم فضای بین قاب یک المان با قاب المان دیگر است. لایه ها را در شکل زیر مشاهده می کنید.
نحوه استفاده از قاب ها
برای نمایش قاب ها در CSS از خاصیت border استفاده می کنیم. ویژگی های قاب ها به صورت های زیر می باشد:
- border-style : نوع قاب
- border-size : اندازه یا ضخامت قاب
- border-color : رنگ قاب
- border-top-style : نوع ضلع بالایی قاب
- border-bottom-style : نوع ضلع پایینی قاب
- border-right-style : نوع ضلع راست قاب
- border-left-style : نوع ضلع چپ قاب
p{
border-top-style: dashed;
border-bottom-style: solid;
border-right-style: dotted;
border-left-style: dotted;
}
نوشتن دستورات فوق به صورت جداگانه کار وقت گیری است بنابراین می توانیم این دستورات را در یک دستور خلاصه کنیم. در مثال زیر دستور اول ضخامت، دستور دوم نوع و دستور سوم رنگ قاب را مشخص می کند.
border: 5px solid red;