تفاوت height و min-height و max-height در CSS

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

در بین این سه دستور ، دستور height کاربرد بسیار بیشتری دارد و اغلب طراحان height را در بخش‌های زیادی از قالب استفاده می‌کنند اما قطعا دستورات min-height و max-height در CSS کاربرد اساسی دارند . نیازی به توضیح اضافی نیست اما بازهم مختصری درمورد این 3 دستور توضیح دهیم !

دستور height

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

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

در اینصورت اگر باکس شما خالی از محتوا باشد ، ارتفاع آن 300 است . اما اگر محتوای داخل این المان ، به اندازه‌ای باشد که از 300 بیشتر باشد ، محتوای اضافی دچار سرریز یا همان Overflow خواهد شد . مگر اینکه با دستوراتی همچون Overflow با مقدار hidden ، سرریز را مخفی کنید .

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

height: 250px;
object-fit: contain;

اکنون برای این دستور می‌توان اینگونه نتیجه گرفت :

اما درنظر داشته باشید که نباید برای قسمت‌هایی که از لحاظ تنظیم ارتفاع آنها مطمئن نیستیم ، از این دستور استفاده کرده و ارتفاع را محدود کنیم .

دستور min-height

یکی دیگر از دستورات قسمت ارتفاع min-height است . min-height برای زمانی است که شما قصد دارید تا حداقل ارتفاع را تنظیم کنید .

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

min-height: 100px;

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

اکنون برای این دستور می‌توان اینگونه نتیجه گرفت :

اما دستور آخر یعنی max-height را باهم بررسی و نتیجه گیری کنیم .

دستور max-height

max-height برای زمانی است که قصد دارید تا یک حداکثر ارتفاع تنظیم کنید به عبارتی المان شما می‌تواند نهایتا مقدار مثلا 280 پیکسل ارتفاع داشته باشد و بیشتر از آن مقدار ، ارتفاع حق افزایش ندارد .

max-height: 280px;

این دستور دقیقا عکس دستور min-height است . در دستور min-height از یک ارتفاع مشخصی شروع می‌کنیم اما در دستور max-height این توقف است که در ارتفاع مشخصی است .

اکنون برای این دستور می‌توان اینگونه نتیجه گرفت :

این مقاله ساده‌ترین توضیح را درمورد سه المان ارتفاع درطراحی CSS خدمت شما ارائه کرد . دقت داشته باشید که برای سه دستور width و min-width و همچنین max-width نیز همین قوانین وجود دارند اما در قسمت عرض صفحه عمل می‌کنند ، لذا جهت آموزش در این مورد نیازی به نوشتن محتوا دیگری خدمتتان نیست . موفق و پاینده باشید دوستان سئو نودی !

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا