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

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

تگ div در html

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

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

Box Model در CSS

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

Content

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

Padding

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

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

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;
/* از بالا 10پیکسل و از چپ و راست 20 پیکسل و از پایین 5 پیکسل گسترش می دهد */
padding: 10px 20px 5px;
/* از بالا 20 از راست 30 از پایین 30 و از چپ 20 پیکسل فاصله می گیرد */
margin: 20px 30px 30px 20px;
border: 5px solid #030303;

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

نتیجه اجرا

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

 

مشکل

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

مسئله 2) یک مسئله دیگری که اینجا وجود دارد این است که اگر با جهت نمای موجود در inspect روی تک تک divها برویم  تا با خط چین محدوده  ارتفاع و عرض تصویر را نشان دهد . عرض و ارتفاع المان های div اون چیزی نیست که در css مشخص کردیم مثلا سایز المان div دوم را 200*300 در نظر گرفتیم ولی طبق تصویر230*330 نشان می دهد چرا؟چون  دو تا 10 پیکسل مربوط padding  به می باشد و دو تا 5 پیکسل مربوط بهborder  که جمعا 30 پیکسل به عرض و ارتفاع اضافه شده است. برای تگ 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 قرار دهیم المان تا جایی که می تواند به سمت چپ منتقل می شود.

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

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

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

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

 

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

به این مقاله چند تا ستاره میدی؟

[تعداد رای: 10 امتیاز: 4.2]