رفتن به مطلب

ایجاد فاصله استاندارد


mohammad06

پست های پیشنهاد شده

سلام

من در سایت خودم وقتی میخوام بین چند عنصر فاصله بزارم دچار این مشکل هستم که چقدر فاصله بزارم

مثلا

داخل هدر 3 تا عنصر هست مثل دکمه منو و سبدخرید و سرچ فرم حالا دکمه منو همینطور که میبینم تشخیص میدم خیلی از دوتا دیگه دور و رفته توی لوگو در حالت ریسپانسیو منظورم حالا چطوری فاصله بین سرچ فرم و سبدخرید را چطوری بدست بیارم که این هم همانقدر فاصله داشته باشه

مثل تایپ کردن داخل برگه که بعد هر کلمه تو حالت استاندارد یک space میزنیم و اگر 3 تا خورده باشه زشت میشه

هدر دیجی کالا را که دیده باشید به طور مثال متوجه هستید که فاصله از لب صفحه تا ایکون حساب کاربری و از ایکون حساب کاربری هم مسلما تا ایکون کناری که سبدخرید فاصله یکیه حالا دقیق من میخوام این فاصله را بدست بیارم که چند پیکسل هست که وقتی بهم ریختگی پیش میاد دقیق تر مارجین بدم مثل خط کش گذاشتن

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود.

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

اما عموما فاصله ی 5 پیکسل بین عناصر نزدیک به هم کافیه. 

 

و برای اینکه کلیدها، لینک ها و ... در حالت رسپانسیو و در حالت عادی دسکتاپ بتونند موقعیت مکانی خودشون رو حفظ کنند، یکی از راه هاش استفاده از position: absolute هست.

استفاده از این دستور در CSS کمی ممکنه شما رو دچار مشکل کنه، چون با این دستور، عنصری که تعیین کردید مکانش ثابت باشه، در هر شرایطی مکانش ثابت هست. یعنی اگر متن یا عناصر متغیر دیگه ای هم داخل اون محدوده باشند، عنصری که absolute شده، روی دیگر عناصر قرار میگیره.

 

برای استفاده از این دستور:

1. اول باید محدوده ای که این عنصر قراره داخلش قرار بگیره رو relative کنید. برای مثال اگر می خواهید این عنصر رو در نوار بالای سایت قرار بدید، به Class اصلی اون نوار، این دستور CSS رو اضافه کنید:

position: relative;

2. عنصر مورد نظر رو absolute کنید. بعد از Relative کردن محدوده ی اصلی، الان می تونیم با Absolute کردن و استفاده از دستورات right و top مکان اون عنصر رو در نوار تثبیت کنیم.

حالا در این بخش از دو راه میشه عنصر مورد نظر رو مکان دهی کرد. 

اگر فقط یک عنصر (لینک/کلید/ یا هر چی) دارید، می تونید دستور زیر رو در Class مربوط به همون عنصر اضافه کنید:

position: absolute;
top: 10px;
left: 5px;

با این سه دستور، عنصر شما به حالت ثابت تبدیل میشه و به سمت چپ نوار با فاصله ی 5 پیکسل و با فاصله ی 10 پیکسل از بالای نوار قرار خواهد گرفت.

 

اما اگر بیش از 1 عنصر داشتید که باید همه رو به صورت دسته جمعی در یک مکان ثابت قرار بدید، بهتره کل عناصر مورد نظر رو داخل یک Div اضافه قرار بدید و بعد دستور بالا رو به اون DIV اضافه کنید. به این ترتیب چند عنصر شما باهم در یک مکان ثابت قرار خواهند گرفت. برای فاصله بین عناصر هم میتونید از margin-right: 5px استفاده کنید.

 

 

البته استفاده از Absolute یکی از راه های تعیین مکان عناصر در طراحی هست. همچنین میشه از Float یا حتی از Text Align هم گاهی اوقات استفاده کرد.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...