JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li> <li>1</li> <li>1</li> <li>1</li>
</ul>

CSS

ul {
    
    background:#ccc;
}

li {
    
    display:blcok;
    float:left;
    width:100px;
    margin:0 10px;
    background: green;
    list-style:none;
}

JavaScript

var li = $('li');
var w = 0;
for (i=0;i<li.length;i++) {
    console.log(parseInt(li.eq(i).css('margin-left')))
      w += (parseInt(li.eq(i).width())+parseInt(li.eq(i).css('margin-left')) +parseInt(li.eq(i).css('margin-right')));  
}
alert(w)