CSS 5

يمكن تحريك المسافة الموجودة قبل الكلام داخل المستطيل من خلال

• margin

• padding

• position

• repeat

يمكن زيادة او نقصان المسافة قبل المستطيل من خلال

• margin

• padding

• position

• repeat

يمكن تحريك الصورة داخل المستطيل لتكون على اليسار او اليمين من خلال

• margin

• padding

• position

• repeat

لمنع تكرار الصورة داخل المستطيل من خلال الخاصية

• repeat - no

• no - repeat

• non - repeat

• on - repeat

input {
  background-color: #222;
  background-image: url(searchicon.png);
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

• الكود صح

• الكود خطأ

input{
  background-color: #222;
  background-image: url("searchicon.png");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

• الكود صح

• الكود خطأ

.input{
  background-color: #222;
  background.image: url("searchicon.png");
  background.position: 10px 10px;
  background.repeat: no-repeat;
  padding-left: 40px;
}

• الكود صح

• الكود خطأ

input {

width: 10%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

}

• الكود يعطى ما بالصورة

• الكود لا يعطى ما بالصورة

input {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

box-sizing: border-box;

}

• الكود يعطى ما بالصورة

• الكود لا يعطى ما بالصورة

vertical - align

• top

• left

• right