spacing in a list with css styling - css

Question

Ive created a box using div class. but Ive been trying to space the row and columnsiV
Ive tried some padding-left and right both it doesnt seem to be working.
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>
</section>

Answer 1

Is there a reason you aren't just using margin? Specifically,
li {
margin: 10px;
margin-left: 30px; // if you want a different margin on the left
}
If this is not what you're looking for then please elaborate on your question.
li {
margin:10px;
margin-left:30px;
}
<div class="body">
<ul class="box">
<li> Maths </li>
<li> English </li>
<li> Chemistry </li>
<li> Commerce </li>
<li> Computer </li>
<li> Biology </li>
</ul>
</div>

Answer 2

To add padding between the rows, you need to add it to list elements.
Target these by using ".box li" in your CSS

Answer 3

You can use this code
.body .box {
margin: 0;
padding: 0;
}
.body .box li {
margin: 0;
padding: 0;
list-style-type: none;
}
.body .box li a {
margin: 0;
padding: 0 15px;
font-size: 18px;
font-weight: 400;
color: #337ab7;
line-height: 36px;
text-decoration: none;
}
.body .box li:hover a {
color: red;
}
<div class="body">
<ul class="box">
<li>Maths</li>
<li>English</li>
<li>Chemistry</li>
<li> Commerce </li>
<li>Computer</li>
<li>Biology</li>
</ul>
</div>