بستن منو
۶۳
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
13
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
5
انتخابگرها (Selector) (انتخاب عناصر صفحه)، در CSS
انتخابگرها (Selector) (انتخاب عناصر صفحه)، در CSS
5
تعیین اندازه و موقعیت عنصرها، در CSS
تعیین اندازه و موقعیت عنصرها، در CSS
4
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
3
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (links)، در CSS
لینک ها (links)، در CSS
5
رنگ ها (Color) و تعیین رنگ، در CSS
رنگ ها (Color) و تعیین رنگ، در CSS
1
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
مباحث عمومی، در CSS
مباحث عمومی، در CSS
8
×

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

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
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

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

مباحث اولیه
مباحث اولیه برای آشنایی با LESS
مباحث اولیه برای آشنایی با LESS
4
بستن منو
۷۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
نمایش متن، در HTML
5
نمایش عکس، در HTML
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
17
تعیین مشخصات کلی صفحه، در HTML
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
مباحث عمومی، در HTML
10
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
انیمیشن ها (Animation)، در W3.CSS
5