پروژه درس 26؛ مدل جعبه CSS — ارومیا دیزاین
اجرا: ZIP را استخراج کنید و index.html را در مرورگر باز کنید. اینترنت یا نصب ابزار لازم نیست.
style.css نسخه شروع است. solution.css نسخه کامل همراه پاسخ تمرین است.
برای مشاهده پاسخ، مسیر style.css را در index.html به solution.css تغییر دهید.
آزمایش اول: جعبه content-box محتوای 200px، فاصله داخلی 20px و کادر 4px در هر طرف دارد؛ عرض مرز بیرونی کادر برابر 248px است.
جعبه border-box با همان مقادیر، عرض مرز بیرونی کادر 200px و عرض محتوا 152px دارد.
در هر دو مورد margin خارج از عرض تعیین شده است. در نمونه margin افقی صفر است.
آزمایش دوم: padding جعبه ها را از 20px به 30px تغییر دهید. عرض بیرونی اول 268px می شود؛ دومی همچنان 200px و محتوایش 132px می شود.
آزمایش سوم: margin کارت خدمات را تغییر دهید و آن را با تغییر padding مقایسه کنید.
تمرین: padding کارت تمرین 1.5rem، کادر 3px سبز، margin-bottom برابر 1rem و margin-top عنوان صفر باشد. عرض کارت با کادر و فاصله داخلی از ظرف بیرون نزند.
برای مقایسه دقیق در بخش Computed یا Box Model ابزار مرورگر اندازه ها را ببینید.
ناحیه نمونه ها در صفحه باریک اسکرول افقی داخلی دارد تا اندازه آزمایش ثابت بماند.
تمام اعداد داخل کد انگلیسی هستند.
