Indids در HTML CSS. CSS Detentation: موقعیت محتوا

این اتفاق می افتد که هنگام ایجاد یک آیتم یا طرح، ما باید یک افقی پایدار ایجاد کنیم تا آن را نسبت به یکدیگر داشته باشیم. این می تواند مانند بلوک ها یا عناصر مختلف باشد، یا به جای آن، فاصله ای است که در ابتدا بین بلوک های واقع به صورت افقی مشخص شده است. راه های مختلفی برای ایجاد اندام در عناصر طراحی وجود دارد. با این حال، برای سازگاری با مرورگرهای چند مدرن در اینجا ما به عنوان یک موضوع به روز بر روی Retrace به عنوان متن یا بلوک در صفحه لمس خواهیم کرد.

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

از آنجایی که اکثر محتوای صفحه وب به عنوان یک متن نمایش داده می شود، توانایی طراحی این متن هر دو جذاب و کارآمد است، این یک مهارت مهم است که می تواند تبدیل به یک طراح وب شود. برای ایجاد شرح و پاراگراف، روش معمول استفاده شده و توصیه شده از CSS استفاده می شود. در اینجا شما با نمونه های مختلفی از نحوه استفاده از CSS برای متن و یک عنصر ضمنی ارائه می شود.

یک ضخامت خارجی را از بالا بر روی CSS تنظیم کنید

برای ایجاد دندانهای بالا، قطعا بدون خواص CSS نمی تواند انجام دهد، زیرا ما نیاز به حاشیه بالا، این مقدار را می توان به طور متفاوت به عنوان در PX و استاندارد در پیکسل، EM،٪ و غیره مشخص شده است، که همه چیز در CSS سبک در CSS اتفاق می افتد اندازه گیری واحد

مثال استفاده:

margin-block (
حاشیه بالا: 50px؛
}

چه می توانم به تصویر نگاه کنم؟

شما همچنین می توانید از آن برای بالا بردن بلوک استفاده کنید، در اینجا شما می توانید از اموال به نام استفاده کنید حاشیه چپ همچنین حاشیه راست و حاشیه پایین. جایی که ما به سادگی اموال حاشیه را مشخص می کنیم، جایی که ممکن است ابتدا 4 پارامتر را تنظیم کنیم، در اینجا ما به صورت عقربه های ساعت به نظر می رسد که ما از سمت بالا شروع می کنیم با ادامه هر طرفی.

حاشیه: 20px 50px 30px 50px؛

این چطور کار خواهد کرد لبه.: از بالا به سمت راست از پایین سمت چپ:

همچنین یک ضخامت داخلی از بالا در CSS وجود دارد

این اتفاق می افتد که لازم است محتوای محتوای عمودی را هماهنگ سازم، این نسبت به بلوک والدین است، فرصتی برای استفاده از خواص دیگر به عنوان Padding-top وجود دارد، که باعث می شود، و دقیق تر به طور پیش فرض مجموعه های داخلی را به بالا تنظیم کنید . اگر ما در مورد خواص مشابه صحبت کنیم، که همچنین می تواند تجویز شود و بر روی آنالوگ تنظیم شود، سپس حاشیه در PX، EM،٪ و دیگر واحدهای می رود.

مثال:

Padding-Block (
Padding-top: 47px؛
}

ما به مثال نگاه می کنیم:

حالا شما می توانید ملک آنالوگ را در نظر بگیرید لبه. و لایه گذاریکه درگیر وظیفه از طرف دیگر از طرف دیگر عنصر بلوک است، اما در حال حاضر به طور جداگانه می آید: padding-left, padding-right, پدینگ پایین. از کجا می توانید بلافاصله از فاصله ای که فقط برای همه طرف ها نیاز دارید بپرسید، و همه چیز در همان زمان خواهد بود.

padding: 10px 20px 40px 50px؛

در ابتدا شما می توانید مقدار را تعیین کنید لبه. شروع به عنوان شما از بالا درک می کنید، اما پس از آن همه چیز در جهت عقربه های ساعت، آن را به سمت راست، از پایین، در سمت چپ، و غیره.

در حال حاضر بسته به وضعیت های مختلف، شما این فرصت را دارید که از بالا در سبک های CSS استفاده کنید، جایی که ما از خواص استفاده می کنیم لبه. و لایه گذاریممکن است موارد لازم را در صفحه از منابع اینترنتی خود تنظیم کنید، همانطور که فکر کرده اید و باید انجام دهید.

شرح

مقدار عقب نشینی از لبه راست عنصر را تعیین می کند. یک ضخامت فاصله از لبه بیرونی حد مناسب عنصر فعلی به مرز داخلی عنصر اصلی آن است (شکل 1).

نحو

حاشیه راست: ارزش | خودکار | به ارث می برند.

ارزش های

مقدار بازنشستگی مناسب می تواند در پیکسل (PX)، درصد (٪) یا سایر واحدهای مجاز برای CSS نشان داده شود. ارزش می تواند هر دو مثبت و منفی باشد.

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

HTML5 CSS2.1 IE CR OP SA FX

نتیجه این مثال در شکل نشان داده شده است. 2

شکل. 2. استفاده از اموال حاشیه راست

مدل شیء

document.getElementbyid ("ElementID") .style.marginright

مرورگرها

Internet Explorer 6 مرورگر دو برابر ارزش اندام چپ یا راست برای عناصر شناور است که در عناصر اصلی سرمایه گذاری می شود. dwinkles که detent، که مجاور طرف پدر و مادر است. مشکل معمولا با اضافه کردن صفحه نمایش حل می شود: خطی برای یک عنصر شناور.

اینترنت اکسپلورر قبل از نسخه 7.0 از ارزش ارثی پشتیبانی نمی کند.

سلام به وبلاگ من CSS (جداول سبک Cascade) فرصت های زیادی را برای پیکربندی ظاهر صفحات وب فراهم می کند. امروز من می خواهم به زودی نشان دهم چگونه می توان در CSS از بالا یا هر طرف دیگر برای هر عنصر تعیین کرد.

اندام خارجی

اندام خارجی با استفاده از اموال حاشیه تنظیم شده است. با استفاده از آن، شما می توانید یک بار از هر چهار طرف تنظیم کنید، یا از خواص دیگر استفاده کنید: حاشیه بالا، حاشیه، حاشیه حاشیه، حاشیه راست، حاشیه پایین، که به شما این امکان را می دهد که فقط از یک طرف آن را ایجاد کنید.

اندام خارجی، فاصله ای را تعیین می کند که لبه انتخاب شده عنصر از عناصر دیگر در صفحه منتقل می شود. به عنوان مثال، نوشتن:

p، div (
حاشیه بالا: 20px؛
}

این به این معنی است که تمام بلوک ها و پاراگراف ها یک ضعف به بالای 20 پیکسل دریافت می کنند، یعنی لبه بالایی آنها از عناصر مجاور آن دور می شود.

اندام را می توان در هر طرف تنها با همان ویژگی حاشیه ضبط کرد، که 4 عدد را در یک ردیف ثبت می کند:

div (
حاشیه: 20px 10px 20px 10px؛
}

به ترتیب از لبه های بالا، راست، پایین و چپ داده می شود. از آنجا که در این مورد آنها از طرف مقابل برابر هستند، پس از آن می توان آن را بنویسید:

div (
حاشیه: 20px 10px؛
}

اولین مقدار از بالا و پایین، و دوم - در دو طرف است.

اندام داخلی

Indent داخلی به طور متفاوتی کار می کند - بلوک را از عناصر دیگر حرکت نمی دهد و این فاصله را در داخل عنصر اضافه می کند، محتویات (محتوا) بلوک را از لبه های آن حرکت می دهد. راحت است جایی که سایت را که در آن متن در لبه بالا سمت راست پنجره شروع می شود را مشاهده کردید؟

من این را دیده ام، زیرا توسعه دهندگان وب همیشه به عنوان مثال خارجی و داخلی اعمال می کنند تا متن به عنوان مناسب به عنوان امکان پذیر باشد. اندام های داخلی با استفاده از اموال PADDING نوشته شده اند که در آن 4 مقادیر می توانند به تمام لبه ها به تمام لبه ها منتقل شوند.

همچنین شبیه به حاشیه می تواند عنوان عنوان را اضافه کند و فاصله را فقط برای آن تنظیم کند. به عنوان مثال، دندانه دار از بالا می تواند با استفاده از padding-top نوشته شود. به طور کلی، اموال Padding کاملا به طور مشابه به اموال حاشیه کار می کند.

به عنوان مثال، شما می توانید چنین قطعه ای از کد را ذکر کنید:

مسدود کردن (
عرض: 200px؛
Padding: 20px؛
}

شما چه فکر میکنید عرض واقعی عنصر ما چیست؟ این نشان می دهد که 200 پیکسل است، اما Paddings در هر طرف برای 20، مجموع 240 پیکسل اضافه شده است. این را در نظر بگیرید زمانی که طرح.

همچنین می خواهم توجه داشته باشم که Padding به طور معمول تنها توسط عناصر بلوک تنظیم می شود، بهتر است آن را ندهید. حاشیه به طور معمول با هر عنصر کار می کند.

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

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

اگر شما فقط سایت خود را ایجاد می کنید، من شما را در بالای فایل اصلی اصلی خود توصیه می کنم خواص زیر را وارد کنید:

* (-Webkit-Box-Sizing: Border-Box؛ Moz-Box-Sizing: Border-Box؛ جعبه اندازه: Border-Box؛) *: قبل، *: بعد از (-Webkit-box-sizing: جعبه؛ -Moz جعبه اندازه: Border-Box؛ جعبه اندازه: Border-Box؛)

چرا به آن نیاز دارید، می پرسید؟ من به سوال شما با یک مثال بصری پاسخ می دهم.

فرض کنید شما چنین عنصر طرح دارید:

این به نظر می رسد یک گزینه بدون استفاده از خواص شرح داده شده در بالا (عنصر فوقانی) و با استفاده از آنها (مورد پایین):

چه چیزی در اینجا دیده می شود؟ این که عرض عنصر در نسخه اول (بدون استفاده از خواص) با توجه به اضافه شدن اضافه شده است، که کاملا مناسب نیست و از لحاظ طرح درست نیست.

گزینه ای با خواص بسیار زیبایی شناسی است، اما برای استفاده از آن آگاهانه است، زیرا هنگام افزودن آنها به وب سایت آماده، شما در معرض ایجاد یک طراحی رانندگی و "سردرد" به شکل آوردن همه چیز در موضوع به ارمغان می آورد. تمام پروژه هایی که من از ابتدا اتفاق افتاد، بدون این خواص هزینه نکردم.

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

اندام داخلی با خواص CSS "Padding"

به طوری که شما تمام منطق همه چیز را درک می کنید، قطعه زیر را از طرح بندی به عنوان مثال:

با سبک های شما:

test_div (عرض: 250px؛ مرز: 1px جامد؛)

نسخه بصری به دست آمده است:

اموال " لایه گذاری"؟ این کمک می کند تا سازماندهی یک ضمانت داخلی در عناصر مشخص شده. اضافه کردن به طرح ما یک ضایعات داخلی برابر با 10px:

test_div (عرض: 250px؛ مرز: 1px جامد؛ Padding: 10px؛ / / Indent Indent 10px)

به نظر می رسد اینطور به نظر می رسد:

شماره 10 در اموال نشان می دهد که در داخل عناصر مشخص شده با هر یک از چهار طرف خود، لازم است که یک ضرر برابر با 10 پیکسل اضافه شود. پیکسل ها (PX) را می توان با علاقه یا ارزش دیگری که در CSS پشتیبانی می شود جایگزین شود.

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

اولین - این به وضوح نشان دهنده احزاب است:

Padding-top: 10px؛ // Indent Indent 10px از بالا padding-right: 10px؛ // Indent Indent 10px padding-bottom: 10px؛ // Indent Indent Indent 10px پایین Padding-left: 10px؛ // Indent Indent 10px سمت چپ

در این مورد، هر بخش از اموال خود استفاده می کند. و دومین:

Padding: 10px 0 0 0؛ // indent indent داخلی 10px از بالا، هر چیز دیگری - 0px padding: 10px 0؛ // Indent Indent داخلی 10px در بالا و پایین، و در طرف - padding 0px: 0 10px؛ // Indent داخلی 0px از بالا و پایین، و در طرف - 10px

یک لیست ساده از مقادیر وجود دارد، که هر کدام به سمت آن مطابقت دارند. احزاب تنظیم شده اند: اولین مقدار بالا است، دوم - سمت راست، سوم پایین و چهارم است - سمت چپ، یعنی همه چیز در جهت عقربه های ساعت است.

اگر مقادیر دو (بالا و راست) باشند، به این معنی است که آینه ای از مقادیر مشابه به پایین و چپ و فقط بنابراین. به نظر می رسد همه چیز روشن است. اگر برای برخی از طرفین شما لازم نیست از یک ضعف بپرسید - ارزش این طرف "0" تنظیم شده است. من این گزینه را بیشتر دوست دارم، زیرا فشرده تر است، اما در تعهدات من دقیقا گزینه اول را استفاده کردم.

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

اندام خارجی با کمک خواص CSS "حاشیه"

ویژگی متمایز اموال " لبه."- این چیزی است که در خارج از عنصر اضافه شده است، یعنی خارجی.

گزینه هایی برای اضافه کردن اینجا نیز دو.

اولین - با نشانه ای روشن از طرفین:

حاشیه بالا: 10px؛ // 10px خارجی 10px از بالا حاشیه حق: 10px؛ // 10px خارجی 10px در سمت راست حاشیه پایین: 10px؛ // 10px خارجی 10px از زیر حاشیه سمت چپ: 10px؛ // undent خارجی 10px سمت چپ

دومین - با لیست مقادیر، که هر کدام به سمت آن مطابقت دارد:

حاشیه: 10 پیکسل 0 0 0؛ // بی نظیر خارجی 10px از بالا، هر چیز دیگری - حاشیه 0px: 10px 0؛ // 10px خارجی 10px در بالا و پایین، و در طرف - حاشیه 0px: 0 10px؛ // undent خارجی 0px از بالا و پایین، و در طرف - 10px

در اینجا، من تمام ظرافت های کار با قوانین را توصیف نمی کنم، همه چیز همان چیزی است که در مورد اموال است لایه گذاری"این در بالا نوشته شده است.

استفاده از حاشیه با مقدار زیر:

test_div (عرض: 250px؛ Border: 1px جامد؛ حاشیه: 10px؛ / / indent خارجی 10px)

به صورت بصری به نظر می رسد:

همانطور که از مثال دیده می شود، در این مورد یک ضایعات خارجی اضافه شده است، جداسازی عناصر مشخص شده در میان خود.

ویژگی مهم: اگر به دقت در نتیجه نگاه کردید، می توانید متوجه شوید که دندانهای مجاور عناصر خلاصه نشده اند. به این معناست که اگر عنصر اول دارای یک ضایعات پایین خارجی، برابر با 10 پیکسل باشد، و دوم، یک ضایعات خارجی خارجی با همان مقدار است، و سپس کل فاصله بین آنها نیز 10 پیکسل خواهد بود. اگر 10 و 15 به ترتیب به ترتیب، کل کل 15 و غیره است.

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

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

سلام! در ابتدا، من می خواستم این مقاله را در 4 کوچک تقسیم کنم، اما پس از آن فکر کردم. برای چی؟ پس از همه، زمانی که چنین اطلاعاتی در یک ماده واحد جمع آوری می شود راحت تر است.

بنابراین، امروز ما یاد خواهیم گرفت که چگونه CSS را به سمت چپ و از همه احزاب دیگر - در سمت راست، در بالا و پایین، یاد بگیریم. آنها می توانند برای تصاویر و متون انجام شوند. آنها دو گونه هستند:

• خارجی؛
• درونی؛ داخلی.

برای اولین بار، اموال کلیدی حاشیه استفاده می شود، برای دوم - padding. برای وضوح، یک نمونه کوچک برای شما ساخته ام. به صورت بصری مناسب بود که بین فضای داخلی و خارجی متمایز شود، یک جدول قابل مشاهده است. به دنبال چه اتفاقی افتاد؟

اندام خارجی

صحبت کردن آنها را در فایل های سبک CSS، ممکن است جهت گیری بلوک اطلاعات را در صفحه مشخص کنید. به عنوان مثال، آن را به سمت چپ و پایین منتقل کرد. بیایید بلافاصله نشان دهیم که چگونه آن را به نظر می رسد.

به طور کلی، ممکن است گزینه های زیر را برای تنظیم مقررات اعمال کنید.

چپ (حاشیه سمت چپ).

راست (حاشیه راست).

از بالا (حاشیه بالا).

از پایین (پایین حاشیه).

حالا من یک نوشیدنی سرد دیگر را نشان خواهم داد.

همانطور که می بینید، می توانید از یکی از گزینه ها استفاده کنید - اثر یکسان است. فقط در مورد دوم، کد فشرده تر است. همچنین توجه داشته باشید که دندانها در جهت عقربه های ساعت تنظیم می شوند. این همه شروع می شود در بالا و به پایان می رسد در سمت چپ.

داخلی داخلی

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

ما به آنچه اتفاق افتاده نگاه می کنیم.

به طور مشابه با بازده داخلی به CSS، خارجی می تواند توسط کد اختصار یا احزاب جداگانه تجویز شود.

اینها برجسته بودند. در نهایت، من نشان خواهم داد که چگونه می توانید به راحتی برخی از کارها را تسهیل کنید.

در سطح برچسب های انتخاب شده قرار می گیرد

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

به دنبال آنچه که پس از صرفه جویی در تغییرات اتفاق افتاد.

تصویر باقی ماند، تنها متن که در سمت چپ به پایان رسید، به سمت چپ حرکت کرد. دستکاری های مشابه را می توان به بلوک های دیگر اعمال کرد، به عنوان مثال، TR، Span.

به عنوان اطلاعات اضافی، من پیشنهاد می کنم که نشریه را در مورد این کار آشنا کنم. همچنین روش های کاملا جالب وجود دارد. این می تواند برای تشکیل یک رشته قرمز در متن یا سایر اقدامات مفید باشد.

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