آموزش برنامه نویسی CSS به زبان ساده جلسه (4)

آموزش برنامه نویسی CSS به زبان ساده جلسه (4)

CSS Padding
با استفاده از این گزینه فضای اطراف محتوای هر عنصر را می توانید تعیین نمایید.
padding-top : این گزینه فاصله محتوای عنصر از بالا را تعیین می نماید.
padding-right : این گزینه فاصله محتوای عنصر از راست را تعیین می نماید.
padding-bottom: این گزینه فاصله محتوای عنصر از پایین را تعیین می نماید.
padding-left: این گزینه فاصله محتوای عنصر از چپ را تعیین می نماید.

برای کوتاه شدن کد نویسی می توانید تنها مقادیر را نوشته و فاصله ها را تنظیم نمایید. به مثال زیر دقت کنید:

عدد اول فاصله از بالا را مشخص می کند، عدد دوم فاصله از راست را تعیین می کند، عدد سوم فاصله از پایین و عدد چهارم فاصله از چپ را معین می نماید.
گاهی اوقات بجای 4 عدد تنها 3 عدد نوشته می شود که در این مواقع عدد اول فاصله از بالا است، عدد دوم فاصله از چپ و راست و عدد سوم فاصله از پایین می باشد.

گاهی اوقات نیز تنها دو عدد نوشته می شود که عدد اول فاصله از بالا و پایین و عدد دوم فاصله از چپ و راست می باشد.
زمانی که تنها یک عدد نوشته می شود یعنی برای هر 4 طرف باید در نظر گرفته شود.

CSS Height and Width
عرض و ارتفاع یک عنصر در CSS را توسط خصوصیات Height and Width تعیین می نمایند.
اعداد این عناصر را به صورت درصدی نیز می توان در نظر گرفت.

Setting max-width
این گزینه حداکثر عرضی را که برای یک عنصر می توان در نظر گرفت را تنظیم می نماید.
عدد این خصوصیت را می توان به صورت درصد نیز وارد نمود.

CSS Box Model
این گزینه می تواند اطراف هر عنصر یک Box ایجاد نماید. برای این کار باید خصوصیت های زیر را تنظیم کنید:
Content
این گزینه محتوا را تنظیم می کند جایی که متن و عکس ها باید به نمایش درآیند. 
Padding 
این گزینه دور محتوا را فاصه ایجاد می کند.
Border 
این گزینه دور محتوا و Padding کادر ایجاد می نماید.

Margin 
این گزینه در خارج از کادر فاصله ایجاد می نماید.