بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
×

دانلود فروشگاه اندروید کلیدستان

542

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

margin ، padding و border در CSS

برای هر عنصر (یا هر ناحیه) در CSS ، چندین بخش به صورت شکل زیر تعریف می شود :

margin ، padding و border در CSS

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

برای اینکه به صورت عملی با این بخش ها آشنا شوید و یاد بگیرید که چگونه اندازه هر یک از این بخش ها را تعیین کنید ، به مثال زیر توجه کنید :

مثال

ابتدا کدهای زیر رو می نویسیم تا 9 ناحیه با اندازه های یکسان ، اما با رنگ های پس زمینه متفاوت ، داشته باشیم :


<html>
 
<head>
<style type="text/css">
.class_1 {
             float:left;
                 height:130px;
                 width:130px;
             }  
#id_1 {
          background-color:#0F9;
          }    
#id_2 {
          background-color:#9F3;
          }  
#id_3 {
          background-color:#F66;
          }  
#id_4 {
          background-color:#0FF;
          }  
#id_5 {
          background-color:#93C;
          }
#id_6 {
          background-color:#F00;
          }  
#id_7 {
          background-color:#CF0;
          }  
#id_8 {
          background-color:#F60;
          }  
#id_9 {
          background-color:#0F9;
          }                                      
</style>
</head>
 
<body>

<div class="class_1" id="id_1">text.</div>
<div class="class_1" id="id_2">text.v/div>
<div class="class_1" id="id_3">text.v/div>
<div class="class_1" id="id_4">text.</div>
<div class="class_1" id="id_5">text.</div>
<div class="class_1" id="id_6">text.</div>
<div class="class_1" id="id_7">text.</div>
<div class="class_1" id="id_8">text.</div>
<div class="class_1" id="id_9">text.</div>

</body>
</html>

نتیجه :

Result

اکنون کدها را تغییر می دهیم تا ناحیه ای که در وسط قرار گرفته است ، دارای مقداری margin و padding باشد :


<html>
 
<head>
<style type="text/css">
.class_1 {
             float:left;
                 height:130px;
                 width:130px;
             }  
#id_1 {
          background-color:#0F9;
          }    
#id_2 {
          background-color:#9F3;
          }  
#id_3 {
          background-color:#F66;
          }  
#id_4 {
          background-color:#0FF;
          }  
#id_5 {
          background-color:#93C;
          padding:10px;
          margin:10px;
          height:90px;
          width:90px;
          }
#id_6 {
          background-color:#F00;
          }  
#id_7 {
          background-color:#CF0;
          }  
#id_8 {
          background-color:#F60;
          }  
#id_9 {
          background-color:#0F9;
          }                                      
</style>
</head>
 
<body>

<div class="class_1" id="id_1">text.</div>
<div class="class_1" id="id_2">text.</div>
<div class="class_1" id="id_3">text.</div>
<div class="class_1" id="id_4">text.</div>
<div class="class_1" id="id_5">text.</div>
<div class="class_1" id="id_6">text.</div>
<div class="class_1" id="id_7">text.</div>
<div class="class_1" id="id_8">text.</div>
<div class="class_1" id="id_9">text.</div>

</body>
</html>

دقت شود که اندازه این ناحیه را کوچکتر کرده ایم تا نظم قرارگیری تمامی ناحیه ها در کنار هم ، خراب نشود . این نکته بسیار مهم است و شما همیشه باید اندازه های ناحیه ، مقدار margin ، مقدار padding و ضخامت border را در نظر بگیرید تا طراحی سایت به هم نخورد . علاوه بر این ، من به شما توصیه می کنم که حتما طراحی خود را در مرورگرهای مختلف تست کنید زیرا بعضی مرورگرها (مخصوصا internet explorer) ممکن است نتیجه متفاوتی را به شما نمایش بدهند .

مشخصه padding را برابر 10px تعیین کرده ایم که باعث می شود که مقدار padding برای هر چهار جهت (بالا ، پایین ، چپ و راست) ، برابر 10px در نظر گرفته شود . برای margin نیز به همین صورت است و چون جهتی را مشخص نکرده ایم بنابراین مقدار تعیین شده برای margin ، برای هر چهار جهت می باشد . مشخصه های دیگری نیز وجود دارند که توسط آنها می توان padding یا margin را تنها برای یک جهت انتخاب نمود . مثلا برای جهت راست ، دو مشخصه padding-right و margin-right وجود دارد .

نتیجه :

Result

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

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 0 0 0

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Less CSS Tutorials for Beginners
مجموعه ویدئوهای آموزشی Less CSS برای مبتدیان - مجموعه Less CSS Tutorials for Beginners - از thenewboston.com
8
بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)