margin ، padding و border ، در CSS

برای هر عنصر (یا هر ناحیه) در 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>

</body>
</html>

نتیجه :

اکنون کدها را تغییر می دهیم تا ناحیه ای که در وسط قرار گرفته است ، دارای مقداری 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>

</body>
</html>

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

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

نتیجه :

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

دسته بندی مباحث اولیه، در CSS

نویسنده علیرضا گلمکانی

شماره کلید 542

گزینه ها