آموزش تگ div در html | آشنایی با خصوصیت margin و border و padding

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در این جلسه ابتدا با تگ پرکاربرد div در html آشنا می شویم. سپس به آموزش خصوصیت content ، margin و border و  padding در CSS که در بحث طراحی سایت بسیار پرکاربرد و مفید می باشند می پردازیم.

تگ div در html

برای نظم دادن به ساختار کدهای html و در واقع بلوک بندی سایت از تگ <div></div> استفاده می شود. یعنی با استفاده از این تگ می توان سند HTML (یا همون صفحه مرورگر) خود را به بلوک ها یا boxهای جداگانه تقسیم کرد و در هر بلوک محتوا و المان های موردنظر خود را قرار داد. وقتی سایت ما بلوک بندی باشد راحت تر می توانیم استایل های خود را اعمال کنیم.
پس کار تگ div بلوک بندی سند ما می باشد و هر بلوک هم شامل تعدادی المان می باشد.پس می توان گفت تگ div کار گروه بندی المان های یک سند را به عهده دارد. در نتیجه با استایل دادن به div می توان به گروهی از المان ها استایل داد. درسته؟ برای اینکه بهتر متوجه بشیم یک مثال می زنیم.

مثال برای تگ div : کدهای html

در مثال زیر ما دو تا div در سند html تعریف کردیم یعنی دو بلوک ایجاد کردیم در هر بلوک محتوایی دلخواه قرار دادیم مثلا در بلوک اول تگ <p> و در بلوک دوم دو تگ <p> و <img> قرار  دادیم. همانطور که گفتیم تگ div صرفا برای بلوک بندی و گروه بندی المان ها در سند html می باشد(در کدنویسی های پیشرفته چند بلاک یا div به صورت تو در تو تعریف می شود)

<!DOCTYPE html>
<html  lang=”fa” dir=”rtl”>
    <head>
<link href=”style.css” rel=”stylesheet”>
<meta charset=”utf-8″>

   </head>
   </body>
      <div class=”a“>
      <p> محتویات div اول </p>
      </div>

      <div class=”b“>
      <p> محتویات div دوم </p>
      <img src=”dpi.png” alt=”داژیار”>
      </div>
   </body>
</html>

کدهای css

در سند html به هر کدام از تگ های div یک کلاس دادیم تا در فایل css از این کلاس ها استفاده کنیم و به تگ های div استایل دهیم.

body{
background:#ffff88;
}
.a{
width:200px;
height:50px;
background:#3d4d3f;
color:#fff;
text-align:center;
}
.b{
width:300px;
height:200px;
background:#3638d7;
color:#fff;
text-align:center;
}

نتیجه اجرا

این کد را در مرورگر فایرفاکس اجرا می کنیم. همانطور که در نتیجه اجرا مشخص است با استایل دهی به تگ div توانستیم محدوده بلوک ها را مشخص کنیم.پس تگ div به تنهایی کاربرد خاصی ندارد و در کنار ویژگی های css معنا پیدا می کند و خود را نشان می دهد.

(در طراحی سایت به شدت از این تگ استفاده می شود پس باید به خوبی با این تگ آشنا شوید . هر چه در آموزش جلوتر می رویم و با خصوصیات مختلف در css آشنا می شویم بهتر می توانیم تاثیر تگ div در طراحی سایت را نشان دهیم.)

 

 تگ div در html | خصوصیت margin و padding -نتیجه اجرا مثال

یک نکته خیلی مهم در رابطه با طراحی سایت این است که با کلیک روی صفحه مرورگر و انتخاب گزینه inspect element می توانیم کدهای html  و استایل هایی که روی هر یک از المان ها اعمال شده است را ببینیم. در این حالت می توانیم کدها را تغییر دهیم و نتایج را به صورت آنی در مرورگر مشاهده کنیم(البته فقط در مرورگر خودمان)
خب طبق تصویر زیر در صفحه مرورگر راست کلیک و گزینه inspect element را انتخاب کردیم یک کادر در پایین صفحه نمایش داده شد که شامل کدهای html و Css می باشد. وقتی با جهت نما روی هر المان می رویم محدوده آن المان را به صورت یک جعبه یا باکس نمایش می دهد. یک سری خط چین هم نمایش داده می شود که طول و عرض آن جعبه را مشخص می کند. و در طراحی سایت خیلی به ما کمک می کند.

همراه با ما این کار را انجام دهید روی تک تک المان ها بروید تا بهتر متوجه شوید.

 تگ div در html | خصوصیت margin و padding - گزینه inspect در مرورگر

Box Model در CSS

گفتیم که محدوده هر المانی در مرورگر به صورت یک جعبه یا باکس نمایش داده می شود . در CSS هر یک از این جعبه ها یا باکس ها با استفاده از یک مدل خاصی به نام Box model توصیف می شوند.که به محدوده هر المان استایل می دهد. در ادامه می خواهیم با چهار تا خصوصیت در css آشنا شویم که مرتبط با مدل Box model می باشد. هر المانی می تواند شامل چهار تا خصوصیت باشد که محدوده جعبه المان را مشخص می کند تصویر زیر یک box model را نشان می دهد  )

 تگ div در html | خصوصیت margin و padding - خصوصیات box model

Content

محتویات داخلی یک جعبه می باشد که می تواند شامل پارگراف<p> ، تصویر<img> ، لیست <ol> یا <ul> و یا جدول<table> و … باشد . اندازه این قسمت را می توان با دو ویژگی width و height مشخص کرد. اگر اندازه ای به این قسمت ندهیم به اندازه المان و محتوای درونش رشد می کند.

Padding

حاشیه داخلی یک جعبه. دورتا دور content را padding فراگرفته است. پس اگر بخواهیم جعبه از چهار جهت گسترش یابد از این خصوصیت استفاده می کنیم. در واقع فاصله محتوا تا خط دورتا دور المان را می توان با padding تنظیم کرد. به چهار روش می توانیم به این خصوصیت مقدار بدهیم:

  • Padding: top  right  bottom  left  : مثال padding: 10px 20px 30px 40px یعنی ۱۰px از بالا و ۲۰px از راست و ۳۰px ازچپ و ۴۰px از پایین گسترش یابد.
  • Padding: top  right&left  bottom  :  مثال padding: 10px 20px 30px یعنی ۱۰px از بالا و ۲۰px از راست و چپ و ۳۰px از پایین گسترش یابد.
  • Padding: top&bottom  right&left  : مثال padding: 10px 10px یعنی ۱۰px از بالا و پایین و ۱۰px از راست و چپ گسترش یابد.
  • Padding: top&right&bottom&left : مثال padding: 10px یعنی ۱۰px از بالا و پایین و راست و چپ گسترش یابد.
  • Padding-right: right :مثال padding-right:10px یعنی از راست ۱۰px گسترش یابد.
  • Padding-left: left :مثال padding-left:10px یعنی از چپ ۱۰px گسترش یابد.
  • Padding-top: top :مثال padding-top:10px یعنی از بالا ۱۰px گسترش یابد.
  • Padding-bottom: bottom :مثال padding-bottom:10px یعنی از پایین ۱۰px گسترش یابد.

Border

خط دورتا دور یک جعبه. قبلا توضیح دادیم که یک خط دور تا دور المان ایجاد می کند (با ضخامت و رنگی که شما تعیین می کنید)

Margin

حاشیه خارجی یک جعبه. با خصوصیت margin می توانیم فاصله جعبه از المان ها و جعبه های اطرافش از چهار جهت مشخص کنیم. رنگ پس زمینه این فضا شفاف است پس قابل دیدن نمی باشد. مقدار دهی margin هم دقیقا مشابه padding می باشد یعنی به چهار روش  می توانیم مقدار بدهیم.

نکته: تا اینجا همه واحدها را به صورت مقداری و از نوع px در نظر گرفتیم در جلسه ای جداگانه در مورد واحدهایی که در css استفاده می شود بحث خواهیم کرد.

مثال برای Box Model

خب وقتشه یک مثال بزنیم تا بهتر بفهمیم اینا چی بودند. مثال قبل را در نظر بگیرید. کدهای html را تغییر نمی دهیم . فایل css را باز می کنیم و خصوصیت padding و margin،border را برای دو المان div به روش های مختلف اضافه می کنیم:

body{
background:#ffff88;
}

.a{
width:200px;
height:50px;
background:#3d4d3f;
color:#fff;
text-align:center;
/* از بالا ۱۰پیکسل و از چپ و راست ۲۰ پیکسل و از پایین ۵ پیکسل گسترش می دهد */
padding: 10px 20px 5px;
/* از بالا ۲۰ از راست ۳۰ از پایین ۳۰ و از چپ ۲۰ پیکسل فاصله می گیرد */
margin: 20px 30px 30px 20px;
border: 5px solid #030303;

}
.b{
width:300px;
height:200px;
background:#3638d7;
color:#fff;
text-align:center
/* از هر چهارسو ۱۰ پیکسل گسترش می یابد */
padding: 10px;
/* از بالا و پایین ۲۰ پیکسل و از راست و چپ ۵۰ پیکسل فاصله می گیرد */
margin: 20px 50px;
border: 5px solid #030303;
}

نتیجه اجرا

نتیجه اجرا را در تصویر زیر می بینیم. اگر inspect بگیریم خیلی دقیق تر به ما نشان می دهد. همانطور که می بییند و قبلش هم توضیح دادیم خصوصیات padding و margin و border تاثیر خود را روی خروجی کار گذاشتند.

 تگ div در html | خصوصیت margin و padding - مثال برای آشنایی با box model

 

مشکل

مسئله۱)اگر دقت کنید قبل از اینکه ما مقدار margin و padding و border به CSS اضافه کنیم هر دو المان div از سمت راست و بالا فاصله ای دارند. که این فاصله را به صورت پیش فرض مرورگر برای المان ها در نظر گرفته است.

مسئله ۲) یک مسئله دیگری که اینجا وجود دارد این است که اگر با جهت نمای موجود در inspect روی تک تک divها برویم  تا با خط چین محدوده  ارتفاع و عرض تصویر را نشان دهد . عرض و ارتفاع المان های div اون چیزی نیست که در css مشخص کردیم مثلا سایز المان div دوم را ۲۰۰*۳۰۰ در نظر گرفتیم ولی طبق تصویر۲۳۰*۳۳۰ نشان می دهد چرا؟چون  دو تا ۱۰ پیکسل مربوط padding  به می باشد و دو تا ۵ پیکسل مربوط بهborder  که جمعا ۳۰ پیکسل به عرض و ارتفاع اضافه شده است. برای تگ div اول هم به همین شکل وجود دارد.

 

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

راه حل 

برای حل مسئله اول که المان ها با یک فاصله ای از راست و بالا قرار  می گیرند، جهت اطمینان خاطر باید در ابتدای فایل CSS خصوصیات margin و padding و border را برای تمام المان ها صفر کنیم.

برای حل مسئله دوم از خصوصیت border-size استفاده می کنیم که باعث می شود padding و border روی عرض و ارتفاع المان تأثیر نگذارد و طراح سایت گیج نشود. مقدار این خصوصیت هم همیشه border-box می گذاریم.

*{
                margin: 0;
                padding: 0;
                border: 0;
                box-sizing: border-box;
}

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

 -webkit-box-sizing: border-box; /* مربوط به مرورگر کروم*/
 -moz-box-sizing: border-box; /* مربوط به مرورگر فایرفاکس*/
 -o-box-sizing: border-box; /* مربوط به مرورگر اپرا*/
 -ms-box-sizing: border-box; /*مربوط به مرورگر اکسپلور*/

فعلا کدهای بالا را در سلکتور * و در ابتدای فایل CSS می نویسیم تا روی تمام المان ها اعمال شود. در طراحی سایت به صورت حرفه ای یک سری کد وجو دارد که اصطلاحا کدهای ریسیت می گویند ! که طراحان سایت به ابتدای فایل های CSS اضافه می کنند تا نمایش سایت در تمام مرورگر ها یکسان باشد. (کدهای ریسیت رو آخرین جلسه به صورت کامل در اختیارتتون می ذارم) .

نکات نهایی:

نکته: یک سری از المان ها هستند که به صورت پیش فرض مقدار margin از مرورگر می گیرند که به صورت مختصر به آن اشاره می کنیم . (h1، h2،h3،h4،h5،h6،ul،ol و…)

 

نکته:مقدار auto برای خصوصیت margin:  این مقدار برای خصوصیت margin به کار می رود و خیلی پرکاربر است به مرورگر اجازه می دهد تا بصورت خودکار فاصله بیرونی یا margin را تنظیم کند. معمولا از این مقدار برای این که المان در وسط قرار بگیرد استفاده می شود.

زمانی که از auto برای margin استفاده می کنیم باعث می شود تا المان به منتهی الیه یک سمت منتقل شود. مثلا اگر برای سمت راست المان margin را auto قرار دهیم المان تا جایی که می تواند به سمت چپ منتقل می شود.

 تگ div در html | خصوصیت margin و padding - مثال برای مقدار auto

اگر بخواهیم المان در وسط قرار بگیرد باید width را مقدار ثابتی داده بدهیم و از چپ و راست مقدار margin برابر auto باشد.

تگ div در html | خصوصیت margin و padding -مقدار auto برای margin

امیدوارم با تگ div در میکروتیک به خوبی آشنا شده باشید و خصوصیت های margin، padding  وborder را کامل یاد گرفته باشید. درس امروز شامل مواردی بود که به شدت در طراحی سایت مورد استفاده قرار می گیرد پس پیشنهاد می کنم دقیق مطالعه کنید و همراه با مطالعه انجام دهید.

خلاصه جلسه امروز به شرح زیر می باشد:

تگ
<div></div>بلوک بندی و دسته بندی المان ها
Box Model
ناممقادیر
توضیح
content—-محتوا همان المان ها
paddingبه چهار شکلفاصله داخلی دور تا دور محتوا
borderجلسه ۵ اشاره شدجلسه ۵ اشاره شد
marginبه چهار شکلفاصله بیرونی المان از المان های دیگر

 

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 1 امتیاز: 5]