добавление пробелов между <li>объектами, установленными как встроенные

Question

У меня есть куча <li></li> тегов:

 "<li><a href=\"" ><img id= src=\"a.png\" /></a></li>"
        "<li>         </li>"
       "<li><a href=\"" ><img id= src=\"b.png\" /></a></li>"
        "<li>          </li>"
      "<li><a href=\"" ><img id= src=\"c.png\" /></a></li>"
        "<li>           </li>"

со следующими настройками ul li { display: inline; } так что они в одну строку, и я хочу поставить интервал между этими <li>, как я могу это сделать? Я попытался поставить пустой <li></li>, но я не могу отрегулировать ширину интервала.

Answer 1

ul li {
    display: inline;
    margin: 0 10px 10px 0;
}

Answer 2

Используйте display: inline-block вместо inline, они по-прежнему будут иметь ширину и высоту.