cssطراحی سایت

جلسه ۳۸: عملی: اعمال Padding و Margin در CSS

  هدف از این درس این است که یک مثال جهانی از نحوه کارکرد padding و margin را به شما نشان دهیم.   اول از همه ، بیایید استفاده بسیار مهم از margin را ببینیم. چگونه می توان عناصر را به صورت کاملا افقی در مرکز قرار داد نشانه گذاری زیر را در نظر بگیرید:
 <div class="center"></div>

یک div ساده با کلاس ، center

فرض کنید که div به این صورت است:
  .center {
      width: ۲۵۰px;
      height: ۲۵۰px;
      border: ۲px solid red;
      background-color: rgb(189,195,199);
      margin-left: auto;
      margin-right: auto;
      margin-top: ۲۰px;
      margin-bottom: ۳۰px;
  }
این فقط یک div با عرض و ارتفاع است. آه ، و یک border نیز! اعلامیه های سبک دیگر برای margin است. قبل از توضیحات بیشتر ، نتیجه این است:
<html>
 <head>
   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>
 </head>
 <body>
   <div class=”center”></div>
 </body>
</html>

.center {
      width: 250px;
      height: 250px;
      border: 2px solid red;
      background-color: rgba(189,195,199 ,1);
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      margin-bottom: 30px;
  }
آیا متوجه شدید که div کاملاً درون صفحه (در امتداد افقی) قرار دارد. چگونه این کار انجام می شود؟ ترفند margin خودکار! اگر مقادیر حاشیه چپ و راست یک عنصر را روی خودکار تنظیم کنید ، یک عنصر کاملاً مرکزی در امتداد افقی بدست خواهید آورد!

امتحانش کن CSS را در زمین بازی کد بالا مشاهده کنید. با کدها بازی کنید تا بهترین را پیدا کنید

margin ، padding و چند عنصر.

در این مثال ، من می خواهم شما بصری ببینید که چگونه padding و margin کار می کند. نشانه گذاری زیر را در نظر بگیرید:
<div class="wrapper">
    <p>This paragraph should be displayed in the default style of
      the browser with a background color and border. 
      This is help us see where it starts and finishes.</p>
    <p>This is another paragraph that has the default browser
      styles so we can see how the spacing between the paragraphs
      displays when no margin or padding has been applied.</p>
    <p class="paddingtest">This paragraph has ۲em of padding applied
      using CSS. The padding creates additional space on the inside
      of the element.</p>
    <p class="margintest">This is another paragraph that has a margin of ۵em applied using CSS. 
    The margin creates additional space on the outside of the element.</p>
    <p>This is another paragraph that has the default browser
      styles so we can see how the spacing between the paragraphs
      displays when no margin or padding has been applied.</p> 
</div>  
بیایید جلو برویم و عناصر را مانند این استایل کنیم:
  body {
      background-color: #fff;
      margin: ۰; /*this will remove every outer space from body*/
      padding: ۰; /*this will remove every inner space from body*/
      font-family: "Lucida Grande", "Lucida Sans Unicode",
          "Lucida Sans", Verdana, Tahoma, sans-serif;
      font-size: ۰٫۷۵em;
  }
  .wrapper {
      width: ۸۰%;
      margin-top: ۲۰px;
      margin-left: auto;
      margin-bottom: ۴۰px;
      margin-right: auto;
  }
  p {
      border: ۲px solid #aaa; 
      background-color: #۸cacea;
      color: #fff;
  }
  p.paddingtest {
      padding: ۲em;
  }
  p.margintest {
      margin: ۵em;
  }
چیزی نامشخص است؟ در استایل دقیق شوید متوجه خواهید شد که این فقط مواردی است که تاکنون در مورد آنها بحث کردیم. درک آنها دشوار است. margin خودکار در هر دو سمت چپ و راست کلاس .wrapper عنصر را کاملاً در امتداد افقی صفحه قرار می دهد. و آنچه در اینجا داریم:
<html>
 <head>
   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>
 </head>
 <body>
   <div class=”wrapper”>
    <p>This paragraph should be displayed in the default style of
      the browser with a background color and border.
      This is help us see where it starts and finishes.</p>
    <p>This is another paragraph that has the default browser
      styles so we can see how the spacing between the paragraphs
      displays when no margin or padding has been applied.</p>
    <p class=”paddingtest”>This paragraph has ۲em of padding applied
      using CSS. The padding creates additional space on the inside
      of the element.</p>
    <p class=”margintest”>This is another paragraph that has a margin of ۵em applied using CSS.
    The margin creates additional space on the outside of the element.</p>
    <p>This is another paragraph that has the default browser
      styles so we can see how the spacing between the paragraphs
      displays when no margin or padding has been applied.</p>
</div>
 </body>
</html>
body {
  background-color: #fff;
  margin: 0; /*this will remove every outer space from body*/
  padding: 0; /*this will remove every inner space from body*/
  font-family: "Lucida Grande", "Lucida Sans Unicode",
      "Lucida Sans", Verdana, Tahoma, sans-serif;
  font-size: 1.1em;
 }

.wrapper {
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-bottom: 40px;
  margin-right: auto;
  border: 2px solid red;
}

p {
  border: 2px solid red; 
  background-color: rgba(41,128,185 ,1);
  color: #fff
}

p.paddingtest {
  padding: 2em;
}

p.margintest {
  margin: 5em;
}
با دقت نگاه کنید تاثیری که حاشیه و padding روی عناصر بالا دارند را خواهید دید. جالبه! نه؟؟

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا