نگاهی به چگونگی استفاده از فضای سفید در HTML توسط مرورگرها
اگر شما یک طراح وب اولیه هستید، یکی از چیزهایی که باید قبل از آن به آن بفهمانید، این است که فضای سفید در کد سایت، توسط مرورگرهای وب مدیریت می شود.
متاسفانه، راهکارهایی که مرورگرها با استفاده از فضای سفید انجام دادند، در ابتدا بسیار شهودی نیستند، مخصوصا اگر شما به HTML وارد شوید و آن را با نحوه کار با فضای سفید در برنامههای پردازش متن که با آن آشنا هستید آشنا کنید.
در نرم افزار پردازش کلمه، شما می توانید تعداد زیادی فاصله یا زبانه ها را در سند اضافه کنید و فاصله آن در صفحه محتوای محتوای سند منعکس می شود. این مورد در مورد HTML یا با صفحات وب نیست. به همین ترتیب، یادگیری نحوه استفاده از فضای سفید، در واقع توسط مرورگرهای وب بسیار مهم است.
فاصله در چاپ
در نرم افزار پردازش کلمه، سه کاراکتر اصلی فضای سفید، فضای، برگه و بازده ماشینکاری هستند. هر کدام از این ها به شیوه ای متفاوت عمل می کنند، اما در HTML، مرورگرها همه آنها را اساسا یکسان می سازند. این که آیا شما یک فضای یا 100 فضایی را در نشانه گذاری HTML خود قرار دهید یا فاصله خود را با زبانه ها و بازده بارگذاری ترکیب کنید، همه اینها زمانی که صفحه توسط مرورگر رندر می شود، به یک فضای کوچک تبدیل می شود. در اصطلاحات طراحی وب، این به عنوان سقوط فضای سفید شناخته می شود. شما نمی توانید از این کلید های معمولی فاصله برای اضافه کردن فضای سفید در یک صفحه وب استفاده کنید زیرا مرورگر فضای چندگانه را به تنها یک فضای در زمانی که در مرورگر رندر می شود فرو می کند،
چرا کسی از زبانه ها استفاده می کند؟
به طور معمول زمانی که افراد از زبانه ها در یک سند متن استفاده می کنند، از آنها برای دلایل طرح استفاده می کنند یا برای انتقال متن به یک مکان خاص یا فاصله ای معین از عنصر دیگر استفاده می شود. در طراحی وب، شما نمی توانید از این شخصیت های فضایی ذکر شده برای دستیابی به این سبک های بصری یا نیازهای طرح استفاده کنید.
در طراحی وب، استفاده از شخصیت های فاصله اضافی در کد صرفا برای سهولت خواندن کد است. طراحان وب و توسعه دهندگان اغلب از زبانه ها برای کد بازوی استفاده می کنند به طوری که می توانند ببینند کدام عناصر فرزندان عناصر دیگر هستند - اما این نکات روی صفحه بصری خود صفحه تاثیر نمی گذارد. برای کسانی که نیاز به تغییرات طرح بندی بصری دارند، شما باید به CSS (ورق های سبک کابینت) تبدیل شوید.
با استفاده از CSS برای ایجاد زبانه ها و فاصله های HTML
امروزه وب سایت ها با جدایی از ساختار و سبک ساخته شده اند. ساختار یک صفحه توسط HTML انجام می شود در حالی که سبک توسط CSS دیکته شده است. این به این معنی است که برای ایجاد فاصله یا دستیابی به یک طرح خاص، باید به CSS تبدیل شوید و سعی نکنید عادت های فاصله را به کد HTML اضافه کنید.
اگر شما در حال تلاش برای استفاده از زبانه ها برای ایجاد ستون های متن هستید، می توانید به جای استفاده از عناصر
اگر داده های شما تخمگذار هستند، داده های جدولی هستند، می توانید از جداول استفاده کنید تا داده هایی را که شما می خواهید تراز کنید. جداول اغلب یک رپ بد در طراحی وب را درک می کنند زیرا آنها برای سال های بسیار مورد استفاده قرار گرفته اند، اما در صورتی که محتوای شما حاوی داده های جدولی فوق باشد، جدول ها کاملا معتبر هستند.
حاشیه، چسبیده، و نوشتار متن
شایع ترین روش ایجاد فاصله با CSS با استفاده از یکی از سبک های CSS زیر است:
- لبه
- padding
- نوشتار متن
برای مثال، شما می توانید اولین خط پاراگراف مانند یک برگه با CSS زیر را بکشید (توجه داشته باشید که این به این معناست که پاراگراف شما یک خصیصه کلاس "first" دارد که به آن متصل است):
p.first {
نوشتار متن: 5am؛
}
این پاراگراف در حال حاضر حدود 5 کاراکتر است.
شما همچنین می توانید از خواص حاشیه یا پد در CSS برای اضافه کردن فاصله به بالا، پایین، چپ یا راست (یا ترکیبی از آن دو طرف) یک عنصر استفاده کنید. در نهایت، شما می توانید به هر نوع از فاصله مورد نیاز تبدیل به CSS.
حرکت متن بیش از یک فضای بدون CSS
اگر همه شما می خواهید متن خود را بیش از یک فضای دور از مورد قبلی قرار دهید، می توانید از فضای غیر شکستن استفاده کنید.
برای استفاده از فضای غیر شکستن، به سادگی اضافه کنید & nbsp؛ همانطور که بارها به شما در نشانه HTML خود نیاز دارید.
به عنوان مثال، اگر شما می خواهید کلمه خود را پنج فضای بیش از شما، شما می توانید قبل از کلمه اضافه کنید.
& nbsp؛ & nbsp؛ & nbsp؛ & nbsp؛ & nbsp؛HTML این را احترام می کند و آنها را به فضای یکسانی فرو نمی کند. با این حال، این یک عمل بسیار ضعیف محسوب می شود، زیرا افزودن نشانه HTML اضافی به سند تنها برای دستیابی به نیازهای طرح است. با اشاره به این تفکیک ساختار و سبک، شما نباید از اضافه کردن فضاهای غیر فشرده به سادگی برای رسیدن به یک اثر layout دلخواه استفاده کنید و باید از حاشیه و پشتی CSS استفاده کنید.