برای اینکار شکل اول باید یه کد داخل بخش body بنویسید :
<div class="ex"></div>
توضیح : بین دو تگ متنی که میخوای بزاری رو بنویس، یا کد html دیگه ای اگه مد نظرته.
حالا باید استایل براش تعریف کنی.
برای تعریف استایل در تگ <head></head> بنویس، <style></style>.
خب اگه از استایل internal استفاده کنی، داخل style از این کد استفاده کن :
div.ex
{
width:870px;
padding:10px;
border:5px solid gray;
margin:5px;
height:60px;
}
توضیح :
بین محتوا و حاشیه (border) فاصله ای وجود دارد، که بهش padding می گویند، کار padding فاصلۀ بین محتوا را تعیین می کند، مثلا می خوای متن یا کد از حاشیه 5 پیکسل فاصله داشته باشه، باید مقدار padding رو برابر 5 پیکسل بزاری، حالا فاصلۀ کل این مستطیلی که می خوایم بسازیم، از اجسام اطراف رو با margin تعیین می کنیم.
دستوری که نوشته border میزان حاشیه را مشخص کرده و نوع آن که اینجا یک خط هست دور محتوا، می توان dotted یعنی نقطه های کنار هم دور محتوا (حاشیه)، یا dashed یعنی حاشیه خط های تیره باشد، استفاده شود و gray رنگ حاشیه است.
طول و عرض نداریم (من نشنیدم شاید باشه)، برای عرض و ارتفاع به ترتیب از width و height استفاده کن.
خب وقتی می خوای محاسبه کنی از فرمول زیر استفاده کن :
عرض کل : عرض + پدینگ و مارجین و حاشیه در سمت چپ و راست، که انگلیسی هم می نویسم :
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
برای ارتفاع کل هم مانند بالا عمل می کنیم :
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
توضیح : من تو کدهایی که قرار دادم، این محاسبه رو انجام ندادم، و فقط برای اینکه نحوۀ ساخت رو بدونین، کد رو نوشتم.