Помогите, пожалуйста, как изменять расстояние между элементами, не затрагивая остальные (как например эту кнопку '-')
* {
box-sizing: border-box;
}
.shopping-cart {
width: 750px;
height: 423px;
margin: 80px auto;
background: #FFFFFF;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.10);
border-radius: 6px;
display: flex;
flex-direction: column;
}
.title {
height: 60px;
border-bottom: 1px solid #E1E8EE;
padding: 20px 30px;
color: #5E6977;
font-size: 18px;
font-weight: 400;
}
.item {
padding: 20px 30px;
height: 120px;
display: flex;
}
.item:nth-child(3) {
border-top: 1px solid #E1E8EE;
border-bottom: 1px solid #E1E8EE;
}
.buttons {
position: relative;
padding-top: 30px;
margin-right: 60px;
}
.delete-btn {
display: inline-block;
Cursor: pointer;
border: none;
}
.delete-btn {
width: 18px;
height: 17px;
background: url("delete-icn.svg") no-repeat center;
}
.description span {
display: block;
font-size: 14px;
color: #43484D;
font-weight: 400;
}
.description span:first-child {
margin-bottom: 5px;
}
.description span:last-child {
font-weight: 300;
margin-top: 8px;
color: #86939E;
}
is-active {
animation-name: animate;
animation-duration: .8s;
animation-iteration-count: 1;
animation-timing-function: steps(28);
animation-fill-mode: forwards;
}
@keyframes animate {
0% {
background-position: left;
}
50% {
background-position: right;
}
100% {
background-position: right;
}
}
.quantity {
padding-top: 20px;
margin-left: 150px;
}
.quantity input {
-webkit-appearance: none;
border: none;
text-align: center;
width: 32px;
font-size: 16px;
color: #43484D;
font-weight: 300;
}
#minus-btn,
#minus-btn1 {
margin-bottom: 3px;
margin-top: 2px;
width: 30px;
height: 30px;
background-color: #E1E8EE;
border-radius: 6px;
border: none;
cursor: pointer;
}
#plus-btn,
#plus-btn1 {
margin-top: 2px;
width: 30px;
height: 30px;
background-color: #E1E8EE;
border-radius: 6px;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
#price,
#price1 {
margin-left: 100px;
width: 83px;
padding-top: 27px;
text-align: center;
font-size: 16px;
color: #43484D;
font-weight: 300;
border: none;
}
<div class="item" th:each="el : ${session.cart}">
<div class="image">
<img th:src="${session.cart['img']}" alt="" />
</div>
<div class="description">
<span th:text="${session.cart['name']}"></span>
<span th:text="${session.cart['item_size'] != null} ? ${session.cart['item_size']}"></span>
<span th:text="${session.cart['color']}"></span>
</div>
<div class="quantity">
<button id="plus-btn" type="button" name="button">
<img src="plus.svg" alt="" />
</button>
<input id="cart_quantity" th:value="${session.cart['quantity']}" />
<button id="minus-btn" type="button" name="button">
<img src="minus.svg" alt="" />
</button>
</div>
<input type="number" id="price" th:value="${session.cart['price']}" readonly/>
<div class="buttons">
<form th:action="'/cart/remove'" method="post">
<button class="delete-btn" type="submit"></button>
</form>
</div>
</div>
при delete-btn{ margin-left - кнопка '-' спускается вниз