قبل از اینکه که بریم سراغ margin و padding میریم سر وقت div؟!
تگ خییییییییییییلی مهم و کاربردی ” <div></div> “ :

خوب دقت کنین که اگه متوجه نشین کارِتون سخت می شه. تگ <div> خییییییییییییییییلی مهم و پر استفاده هست.

قبلاً بهتون گفتیم که چند سال پیش سایت ها رو با ساختار table می ساختن تا این که مفهوم جدیدی به نام div (مخفف division) معرفی شد. اسمش، معنیِ تیکه تیکه شدن رو میرسونه!!!

خب چیو تیکه تیکه میکنیم؟؟! صفحه مرورگرمون

با استفاده از تگ <div> صفحه رو به قسمت های دلخواه (همون قدر که دوست داریم) تقسیم میکنیم و تویِ هر کدوم از این قسمت ها، محتوایی رو که میخوایم قرار میدیم.

پس چی شد؟؟؟

هر تگ <div> یک قسمت از صفحه رو میگیره. چطور مشخص میکنیم که چه مقدار از صفحه رو بگیره؟؟ یا این که کجای صفحه رو بگیره؟؟ همش با کدهای CSS امکان پذیر هست. عجله نکنین، در ادامه توضیحات براتون میگیم. فعلاً فقط میگیم چطور مشخص کنیم که یک تگ <div> چه مقدار از صفحه رو بگیره.

padding :

یه اتفاقیه که داخل المان میوفته. چه اتفاقی؟؟ گسترش المان.

به زبون ساده، معنیش اینه: میتونیم المان هامون رو هرچقدر که بخوایم بزرگ کنیم. چه از لحاظ طولی، چه از لحاظ عرضی.

margin :

به زبون ساده میشه، فاصله ای که یک المان از المان های اطرافش میگیره. قابل دیدن هم نیست. پس فرقش با padding کاملاً مشخص شد.

padding داخل المان عمل می کنه و خود المان رو بزرگ می کنه ولی margin بیرون المان عمل می کنه و بین المان با المان های اطرافش فاصله ایجاد می کنه