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 روی عناصر بالا دارند را خواهید دید.جالبه! نه؟؟

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

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

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

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