cssطراحی سایت

جلسه ۳۵: منطقه padding در CSS

از خصوصیات padding CSS برای ایجاد فضای اطراف محتوا استفاده می شود. معنی آن چیست؟ ما با بازی نگاهی بازی گونه به منطقه padding می اندازیم.

فرض کنید یک جعبه لباس داشته اید.

شما لباس های خود را جمع کرده و مرتباً در این جعبه نگهداری می کنید.

من برای شما یک عکس خوب از جعبه پیدا کردم. زیر را ببینید

 

اگر به هر دلیلی به فضای بیشتری در جعبه احتیاج داشتید چه می کنید؟

شما نمی خواهید لباس ها لبه های جعبه را لمس کنند. شما می خواهید اندازه جعبه بزرگتر شود و فضای خالی ایجاد شود که لباس را از لبه های جعبه جدا کند.

چگونه این را انجام میدهید؟

این نیمه دشوار است زیرا جعبه ها به طرز جادویی گسترش نمی یابند.

اکنون ، به CSS برگردید.

این کادر ممکن است هر عنصر html را نشان دهد. در این جعبه می توان عناصر دیگر را نوشت ، شامل متن یا تصاویر. این نشان دهنده لباس های داخل جعبه است.

برخلاف جعبه های موجود در دنیای واقعی ، می توانیم فضاهای خالی درون جعبه CSS ایجاد کنیم!

این می تواند به دلایل زیادی مانند استفاده از فضای سفید و ایجاد یک فضای تنفس در طراحی شما باشد. برای انجام این کار ، padding برای نجات شما وجود دارد!

برای قرار دادن یک padding در عنصر خود ، یا همان فضای داخلی ، از ویژگی padding استفاده کنید.

مثلا:

div {
    padding: ۱۰px
}

با این کار ، از هر طرف ، در مرزهای عنصر ، یک پدینگ ۱۰ پیکسلی اضافه می شود.

برای هدف قرار دادن طرفهای خاص در جعبه ، این کار را انجام دهید:

div {
    padding-left: ۱۰px;
    padding-right: ۱۰px;
    padding-bottom: ۱۰px;
    padding-top: ۱۰px;
}

در یک درس خیلی بعد ، نگاهی کوتاه خواهیم انداخت به خلاصه مقاله. در حال حاضر ، این کافی است.

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

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

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

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