چگونه می توانم به تگ small ویژگی margin-top را اعمال کنم؟

دوستان عزیز من گیر کردن اینجا و نیاز دارم به تگ <small> چند پیکسل margin-top بدم. این یه شبیه سازی از کدم منه:

# HTML
<div>It is a test<div>
<small>this need to some margin-top</small>

# CSS
small{
    margin-top: 100px;
    color: #999;
}

کسی می دونه مشکل کجاست و چرا اعمال نمیشه margin-top روی المنت <small> ؟

همانطور که میبینید هیچ مارجینی نگرفته.

سلام این کد ها رو جایگزین کنید.موفق باشید.

    # HTML

        <div>It is a test<div>

        <small>this need to some margin-top</small>

        # CSS

        small{

            display:block;

            padding-top:100px;

            color: #999;

        }

به صورت پیش فرض، تگ small ویژگی inline داره. از طرفی margin-عمودی به المنت های inline تعلق نمی گیره. یعنی وقتی ست می کنی هیچ اتفاقی نمیوفته. پس کافیه display المنت رو به inline-block تغییر بدی:

# HTML
<div>It is a test<div>
<small>this need to some margin-top</small>

# CSS
small {
  margin-top: 100px;
  color: #999;
  display: inline-block;
}

بد نیست به این هم یه نگاهی بندازی: