ویژگی outline در CSS

ویژگی outline، خلاصه ی همه ی ویژگی های خط خارجی (outline) است.

outline: o-style o-width o-color;

در نمونه کد زیر، با ویژگی outline، خلاصه شده ی نمونه کد بالا را نوشتیم.

outline: solid 2px red;

ویژگی ها توضیحات
outline خلاصه نویسی تمام ویژگی های خط خارجی
outline-style استایل خط خارجی
outline-width عرض خط خارجی
outline-color رنگ خط خارجی

تاثیر outline بر عرض المان در CSS

ویژگی outline، اطراف border قرار می گیرد. outline، هیچ تاثیری روی عرض واقعی المان ندارد.

نکته: اگر المان margin داشته باشد، outline، روی margin قرار می گیرد و آن را می پوشاند

outline-width: 5px;
outline-width: 50px;

  

نکته: همانطور که در نمونه کد بالا دیدید، outline، روی مکان قرارگیری المان تاثیری ندارد.

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

outline-width: 5px;
outline-width: 170px;

خلاصه درس

در این درس با ویژگی outline در CSS:

  • تاثیر آن بر عرض المان

آشنا شدیم.

 

توسعه دهندگان
احسان اسلامی