اعمال نشدن margin-top به تگ a

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

در دقيقه ۲۰ ام ويدئو جلسه سوم اين سر فصل
margin-top:۵۰px به تگ a اعمال نشد و من متوجه علت ان نشدم

ممنون ميشم اگر توضيح بديد

.header-title a {
  background-color: orange;
  padding: 5px 1px;
  border-radius: 5px;
  margin-top:50px;}

با سلام و احترام

برای تگ a پراپرتی display را قرار داده و مقدار آن را برابر inline-block در نظر بگیرید . (برابر با block هم در نظر بگیرید درست میشه اما چینش لینک‌ها در این پروژه به هم میخوره)

علی طباطبایی ۲۴ شهریور ۱۴۰۰، ۱۸:۰۳

توضیح اینکه به صورت کلی عناصری که Display اونها به صورت inline هست ( مثل span و تگ‌های a) مارجین از بالا و پایین روشون اعمال نمیشه (چپ و راست میشه). چرایی خیلی مشخصی نداره و این خصوصیت به این نوع تگ‌ها تخصیص داده شده.
به همین خاطر یا باید Display اونها رو به block یا inline-block تغییر بدیم و یا اینکه کارمون رو با padding راه بندازیم.
(البته لازم به ذکره padding top & bottom هم باعث ایجاد فاصله نمیشه در این نوع عناصر و باعث overlap روی عناصر بالا و پایین میشه که خب باید تست کنید خودتون تا متوجه منظور بشید)
به همین علت بهترین راهکار برای این نوع عناصر تغییر خاصیت اونها از inline به block یا inline-block هستش

Mahdi Mohaqeq ۲۷ شهریور ۱۴۰۰، ۱۱:۰۵