رنگ مرزی css. تنظیم یک قاب با یک ویژگی

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

یکی از این مشکلات ناتوانی من در چیدمان یک طرح با تراز کاملاً یکنواخت بلوک ها در امتداد لبه ها بود. بعضی از بلوک‌ها همیشه از لبه‌های بقیه می‌خزیدند. این مشکل با این واقعیت برطرف شد که "این خزیدن" حداکثر 1-2 پیکسل بود و اغلب مشتری به سادگی متوجه آن نمی شد. ولی شخصا خیلی اذیتم کرد.

عین خریدن است تقلبی چینیساعت های سوئیسی به نظر می رسد همه چیز دقیقاً یکسان به نظر می رسد ، اما خود شما می دانید که جعلی است.

فقط کمی تئوری

استاندارد CSS بیان می کند که عرض نهایی یک بلوک از اندازه بالشتک، عرض قاب (اگر فریم دارای 2 لبه افقی است، این اندازه نیز باید در 2 ضرب شود) و عرض متن تشکیل می شود. . آن معنی عرض، که همه به بلوک اشاره می کنند بخشو عرض متن بود. بسیاری از مردم فکر می کنند که این عرض بلوک است، اما اینطور نیست. من هم دقیقا همین فکر را کردم.

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

راه حل مشکل

برای درک آسان تر، در اینجا یک مثال رزمی آورده شده است:

گزینه ها -moz-box-sizingو -webkit-box-sizingلازم است تا نسخه های قدیمی مرورگرهای فایرفاکس و سافاری متوجه شوند که در این مورد نیازی به درج عرض حاشیه و اندازه های پد نیست.

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

P.S.برای من، به عنوان یک توسعه دهنده وب سایت سفارشی، یک آزمون بسیار جدی، ارتقاء یک وب سایت در موتورهای جستجو است. برای من همه اینها موتورهای جستجو، سئو جنگل تاریکی است که من سعی می کنم آن را به افراد دیگر «ببخشم»، زیرا یک فرد فقط می تواند در یک زمینه، در زمینه خودش حرفه ای باشد. من به کس دیگری نیاز ندارم

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

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

Border-width: عرض حاشیه

با استفاده از خواص مرزی-width عرض حاشیه را تعیین می کند. اغلب این اندازه در پیکسل نشان داده می شود. می توانید عرض های یکسان یا متفاوت را برای هر چهار حاشیه تنظیم کنید، به عنوان مثال:

/* همه 4 حاشیه 2px عرض دارند: */ border-width: 2px; /* حاشیه های بالا و پایین 2px عرض، چپ و راست 4px هستند: */ border-width: 2px 4px; /* حاشیه بالا - 2px، چپ و راست - 6px، پایین - 3px: */ border-width: 2px 6px 3px; /* حاشیه بالا - 2px، سمت راست - 3px، پایین - 4px، سمت چپ - 5px: */ border-width: 2px 3px 4px 5px;

علاوه بر این، کلمات کلیدی برای نشان دادن عرض حاشیه وجود دارد:

• نازک - حاشیه 2 پیکسل عرض؛
• متوسط ​​- حاشیه 4 پیکسل عرض؛
• ضخامت - حاشیه 6 پیکسل عرض.

رنگ حاشیه: رنگ حاشیه

ویژگی border-color رنگ حاشیه ها را مشخص می کند. رنگ ها را می توان در هر فرمت CSS مشخص کرد: کلمات کلیدی، هگزادسیمال یا RGB - هر کدام که برای شما راحت تر است. بر اساس قیاس با ویژگی قبلی، می‌توانید برای همه حاشیه‌ها یک رنگ تنظیم کنید یا برای هر حاشیه رنگ‌های متفاوتی را انتخاب کنید.

رنگ حاشیه: #FFFF00;

همچنین می توانید با نوشتن یک رنگ شفاف تنظیم کنید:

رنگ حاشیه: شفاف

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

به لطف ویژگی حاشیه‌ای، می‌توانید یک حاشیه معمولی را به شکل نقطه‌دار، دوتایی یا حجمی تبدیل کنید - تعداد زیادی وجود دارد. معانی مختلف. برای این کار از کلمات کلیدی زیر استفاده کنید:

• جامد - مرز جامد؛
• نقطه چین - مرز نقاط؛
• خط چین - حاشیه نقطه چین؛
• مرز دوگانه؛
• شیار - مرز شکاف حجمی؛
• خط الراس - یک حاشیه حجیم با لبه ضخیم (در اصل وارونگی سبک قبلی).
• ابتدا - مرز اکسترود شده؛
• inset - یک حاشیه تورفته (در اصل وارونگی سبک قبلی).

مانند ویژگی های border-width و border-color، هر حاشیه بلوک را می توان به گونه ای متفاوت استایل داد - برای مثال، می توانید حاشیه های بالا و پایین را به صورت چین دار و حاشیه های راست و چپ را دو برابر کنید. در اینجا همه چیز فقط به تخیل بستگی دارد.

سبک حاشیه: دو نقطه.

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

مرز ویژگی CSS مشترک: 3 در 1

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

حاشیه: 2px نقطه‌دار #FF0000;

مرزها برای احزاب فردی

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

• border-top - سبک برای حاشیه بالا.
• border-right - برای مرز سمت راست؛
• حاشیه پایین - برای حاشیه پایین؛
• border-left - برای حاشیه سمت چپ.

حاشیه بالا: 2px جامد #0000FF; border-bottom: 7px double #000080;

نتایج

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

فرض کنید می‌خواهید یک حاشیه برای یک div با سه حاشیه خاکستری یکدست و یک حاشیه پایین سبز چین ایجاد کنید. شما می توانید این سبک را به صورت زیر بنویسید:

Div (حاشیه-راست: 8 پیکسل دو برابر #FF0000؛ حاشیه-چپ: 8 پیکسل دو برابر #FF0000؛ حاشیه-پایین: 8 پیکسل دو برابر #FF0000؛ حاشیه-بالا: 4 پیکسل نقطه‌دار #FDD201؛ )

اما این یک پست خیلی طولانی است. همه اینها را می توان به اختصار نوشت:

Div ( حاشیه: 8 پیکسل دو برابر #FF0000؛ حاشیه بالا: 4 پیکسل نقطه‌دار #FDD201؛ )

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

وظیفه کوچک

سعی کنید یک حاشیه برای div با ابعاد 200x200 پیکسل ایجاد کنید. سبک های قاب باید به صورت زیر باشد:

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

در نهایت، کار شما باید به این شکل باشد (به جز رنگی که انتخاب می کنید):

نتیجه کار (مشاهده در کروم)

من مطمئن هستم که شما قبلاً با ویژگی مرزی css آشنا هستید. آیا چیز جدیدی که قبلاً در مورد مرز css نمی دانستید، یاد خواهید گرفت؟ خوب، نه تنها یاد خواهید گرفت، بلکه چندین چیز جدید را نیز خواهید دید که قبلاً هرگز نمی دانستید!

نه تنها می توان از CSS3 برای ایجاد گوشه های گرد استفاده کرد، بلکه می توان از کدهای CSS خالص نیز برای ایجاد استفاده کرد اشکال پیچیده. قبلاً می‌توانستید از تصویر پس‌زمینه برای ایجاد ظاهر گوشه‌های گرد استفاده کنید. به لطف تکنیک های جدید برای استفاده از مرز، می توانیم این کار را با کد CSS خالص انجام دهیم.

اصول استفاده از مرز css

احتمالاً قبلاً با آن آشنا هستید استفاده استانداردویژگی های حاشیه:

حاشیه: 1px سیاه و سفید جامد.

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

عرض حاشیه: ضخیم. حاشیه به سبک: جامد; رنگ حاشیه: مشکی؛

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

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

جعبه (حاشیه: 1 پیکسل قرمز یکدست؛ ) .box:hover (حاشیه: 1px سبز ثابت؛ )

یک روش زیباتر و ساده تر برای انجام این کار این است:

جعبه (حاشیه: 1px قرمز ثابت؛ ) .box:hover (رنگ حاشیه: سبز؛ )

همانطور که می بینید، تکنیک پیشرفته زمانی مفید است که فقط برخی از ویژگی ها را تغییر دهیم: عرض، سبک، رنگ و موارد دیگر.

مرز-شعاع

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

اگرچه برای درست بودن استایل باید از پیشوندهای مخصوص Webkit و Mozilla استفاده کرد.

Webkit-border-radius: 10px; -moz-border-radius: 10px. شعاع مرزی: 10 پیکسل.

امروزه می توانیم پیشوندهای خاص را حذف کرده و استفاده کنیم فرم استانداردشعاع مرزی

مزیت دیگر این است که می توانیم از مقادیر ویژه برای هر طرف بلوک استفاده کنیم:

شعاع حاشیه بالا-چپ: 20 پیکسل. حاشیه-بالا-راست-شعاع: 0; حاشیه-پایین-راست-شعاع: 30 پیکسل. شعاع حاشیه-پایین-چپ: 0;

در کد بالا، با تنظیم حاشیه-بالا-راست-شعاع و حاشیه-پایین-چپ-شعاع بر روی "تهی" می توانید به اشکال شگفت انگیزی دست یابید. اگرچه این عنصر ممکن است برخی از ویژگی‌ها را به ارث ببرد که باید بازنشانی شوند.

مشابه حاشیه و padding، می‌توانیم سینتکس را فشرده کنیم:

/* بالا سمت چپ، بالا سمت راست، پایین سمت راست، پایین سمت چپ */ border-radius: 20px 0 30px 0;

به عنوان نمونه ای از استفاده از ویژگی border-radius، من یک "لیمو" را به شما نشان می دهم که طراحان اغلب هنگام طراحی وب سایت از آن استفاده می کنند:

لیمو (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: #F5F240؛ حاشیه: 1 پیکسل جامد #F0D900؛ شعاع حاشیه: 10 پیکسل 150 پیکسل 30 پیکسل 150 پیکسل؛ )

از اصول اولیه فراتر برویم

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

ساختارهای مرزی پیچیده css

تکنیک های زیادی برای ایجاد طرح ها با استفاده از ساختارهای مرزی پیچیده وجود دارد. به عنوان مثال به موارد زیر نگاه می کنیم ...

سبک مرزی

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

حاشیه: 20px groove #e3e3e3;

یا در نحو توسعه یافته:

رنگ حاشیه: #e3e3e3; عرض حاشیه: 20 پیکسل؛ حاشیه به سبک: شیار;

اگرچه این ویژگی ها مفید هستند، اما مبنایی برای ایجاد قاب های پیچیده نیستند.

طرح کلی

محبوب ترین تکنیک ایجاد قاب دوتایی- استفاده از ویژگی outline.

کادر (حاشیه: 5px جامد #292929؛ طرح کلی: 5px جامد #e3e3e3؛ )

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

شبه عناصر

وقتی تکنیک طرح کلی کافی نیست، وسیله جایگزیناستفاده از شبه عناصر:before و:after است. با استفاده از آن می توانید فریم های اضافی را به یک عنصر اضافه کنید:

کادر (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: #e3e3e3؛ موقعیت: نسبی؛ حاشیه: 10 پیکسل سبز ثابت؛ ) /* دو کادر ایجاد کنید باهمان عرض ظرف */ .box:after، .box:before ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ سمت راست: 0؛ .box:after ( حاشیه: 5px یکدست قرمز: 5px یکدست زرد.

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

جعبه-سایه

یک "روش کودکانه" جالب برای ایجاد یک افکت مشابه، استفاده از ویژگی box-shadow CSS3 است:

کادر (حاشیه: 5px قرمز ثابت؛ کادر-سایه: 0 0 0 5px سبز، 0 0 0 10px زرد، 0 0 0 15px نارنجی؛ )

در این مورد، ما باهوش تر بودیم و از یک ویژگی جعبه سایه اختصاصی استفاده کردیم. با تغییر پارامترهای x, y, blur به صفر می توانیم از رنگ های مختلف برای ایجاد فریم های متعدد استفاده کنیم.

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

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

تغییر زاویه

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

مثلا:

شعاع حاشیه: 50 پیکسل / 100 پیکسل؛ /* شعاع افقی، شعاع عمودی */

... این معادل است با:

شعاع حاشیه بالا-چپ: 50 پیکسل 100 پیکسل. حاشیه-بالا-راست-شعاع: 50px 100px; حاشیه-پایین-راست-شعاع: 50px 100px; شعاع حاشیه-پایین-چپ: 50px 100px;

این تکنیک برای ایجاد اشکال منحصر به فرد بلوک مناسب است. به عنوان مثال، در اینجا نحوه ایجاد یک افکت کاغذ پیچیده شده است:

کادر (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: # 666؛ شعاع حاشیه بالا-چپ: 15 میلی متر؛ شعاع حاشیه-پایین-راست: 15 میلی متر؛ 15 میلی متر؛ )

فرم های CSS با استفاده از مرز

این تکنیک نشان می دهد که چگونه می توانید فرم های CSS را ایجاد کنید، در حالی که از عناصری با ابعاد ارتفاع و عرض صفر استفاده می کنید. غافلگیر شدن؟ بیایید به یک مثال نگاه کنیم ...

برای چند مثال بعدی، از نشانه گذاری زیر استفاده خواهیم کرد:

... و سبک اصلی زیر:

جعبه (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ پس‌زمینه: مشکی؛ )

اکثر مثال رایج با استفاده از CSSاشکال - ایجاد یک فلش روان. راز این پیکان در ایجاد مرز با رنگهای متفاوتبرای هر یک از طرفین سپس قرار دادیم صفات عرضو ارتفاع تا 0.

اختصاص به بلوک divکلاس فلش:

پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه بالا: 100 پیکسل قرمز ثابت؛ حاشیه-راست: 100 پیکسل سبز یکدست؛ حاشیه-پایین: 100 پیکسل آبی یکدست؛ حاشیه-چپ: 100 پیکسل زرد یکدست؛ )

برای نشان دادن، ابتدا از نحو توسعه یافته استفاده می کنیم. بعد می توانیم حذف کنیم کد اضافیبا استفاده از نحو کوتاه شده:

پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه: 100 پیکسل ثابت؛ رنگ حاشیه: قرمز سبز آبی زرد؛ )

جالبه، نه؟ حالا ما نصب می کنیم رنگ های شفافاز همه طرف به جز سمت آبی.

پیکان (عرض: 0؛ ارتفاع: 0؛ حاشیه: 100 پیکسل ثابت؛ حاشیه-پایین-رنگ: آبی؛ )

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

یک حباب گفتار ایجاد کنید

برای ایجاد حباب گفتار، به یک قطعه کوچک نیاز داریم CSS خالصکد و یک بلوک div.

حباب گفتار (موقعیت: نسبی؛ رنگ پس‌زمینه: #292929؛ عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ ارتفاع خط: 150 پیکسل؛ /* مرکز عمودی */ رنگ: سفید؛ تراز نوشتاری: مرکز؛ )

حباب گفتار: بعد ( محتوا: ""؛ )

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

حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 10 پیکسل ثابت؛ رنگ حاشیه: قرمز سبز آبی زرد؛ )

اگر بخواهیم فلش رو به پایین باشد، باید تمام مرزها را به جز قسمت بالایی روی شفاف قرار دهیم.

حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 10 پیکسل ثابت؛ حاشیه بالای رنگ: قرمز؛ )

وقتی این را ایجاد می کنیم شکل CSS، نمی توانیم به طور خاص اندازه فلش را نشان دهیم. در عوض، می‌توانیم ویژگی border-width را تنظیم کنیم، که یک اندازه به فلش اختصاص می‌دهد. همچنین موقعیت فلش را در پایین در وسط قرار می دهیم. بر این اساس، برای این کار از مقادیر بالا و چپ استفاده می کنیم.

حباب گفتار: بعد (محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ حاشیه بالای رنگ: قرمز؛ بالا: 100%؛ سمت چپ: 50%؛ )

علاوه بر این، ما فقط باید رنگی مشابه بلوک به آن بدهیم. به یاد داشته باشید، هنگام تعیین موقعیت، باید اندازه حاشیه های دیگر را که نامرئی هستند (15 پیکسل) در نظر بگیرید. همچنین بلوک را در گوشه ها گرد می کنیم.

حباب گفتار ( /* … سبک‌های دیگر */ شعاع حاشیه: 10 پیکسل؛ ) .حباب گفتار: بعد ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 0؛ ارتفاع: 0؛ حاشیه: 15 پیکسل ثابت؛ حاشیه بالا -color: #292929: 100% margin-left: -15px;

بد نیست، نه؟ با استفاده از چندین کلاس CSS و ترفندهای مرزی می توانید چنین چیزی ایجاد کنید.

/* استفاده از حباب‌های گفتار: طبق شکل زیر کلاس .speech-bubble و .speech-bubble-DIRECTION را اعمال کنید.

*/ .speech-bubble ( موقعیت: نسبی؛ رنگ پس زمینه: #292929؛ عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ ارتفاع خط: 150 پیکسل؛ /* عمودی وسط */ رنگ: سفید؛ تراز نوشتاری: مرکز؛ حاشیه- شعاع: 10px; font-family: sans-serif ) .speech-bubble:after (content: ""; position: absolute; width: 0; border: 15px solid; ) /* فلش را قرار دهید */ .speech-bubble-top:after ( حاشیه-پایین-رنگ: #292929؛ سمت چپ: 50%؛ پایین: 100%؛ حاشیه-چپ: -15 پیکسل؛ ) .speech-bubble-right:after (رنگ حاشیه-چپ : #292929; 100% حاشیه بالا: -15px .speech-bubble-color: #292929; top: 100%; margin-left: -15px; ;) .speech-bubble-left:after (حاشیه-راست-رنگ: #292929؛ بالا: 50%؛ سمت راست: 100%؛ حاشیه-بالا: -15 پیکسل؛ )

جایزه! مرکز عمودی در داخل بلوک

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