Как изменить расстояние между картинками html

I’m trying to create a div with images inside it, and there is space between them. For example, I want the space between them is 2px, I can use margin:1px; so it will become 2px when one’s left-margin meet other’s right-margin, same for top and bottom. But there is also space between image and div’s border, so the div will become like this:

+------------------------------------------+
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG1     |    |      IMG2     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|           DIV                            |
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG3     |    |      IMG4     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|                                          |
+------------------------------------------+

When what I’m actually trying to do, is this:

+---------------+---+---------------+
|               |   |               |
|               |   |               |
|               |   |               |
|      IMG1     |   |      IMG2     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+   +---------------+
|        DIV                        |
|                                   |
+---------------+   +---------------+
|               |   |               |
|               |   |               |
|      IMG3     |   |      IMG4     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+---+---------------+

How to do this, without set style for every single image?

I’m trying to create a div with images inside it, and there is space between them. For example, I want the space between them is 2px, I can use margin:1px; so it will become 2px when one’s left-margin meet other’s right-margin, same for top and bottom. But there is also space between image and div’s border, so the div will become like this:

+------------------------------------------+
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG1     |    |      IMG2     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|           DIV                            |
|                                          |
|  +---------------+    +---------------+  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |      IMG3     |    |      IMG4     |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  |               |    |               |  |
|  +---------------+    +---------------+  |
|                                          |
+------------------------------------------+

When what I’m actually trying to do, is this:

+---------------+---+---------------+
|               |   |               |
|               |   |               |
|               |   |               |
|      IMG1     |   |      IMG2     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+   +---------------+
|        DIV                        |
|                                   |
+---------------+   +---------------+
|               |   |               |
|               |   |               |
|      IMG3     |   |      IMG4     |
|               |   |               |
|               |   |               |
|               |   |               |
+---------------+---+---------------+

How to do this, without set style for every single image?

By

rus · Posted December 17, 2022

html:
 

<td>
<span class=»qty-minus» onclick=»qtyMinus(); return false;» data-id=»<?=$id;?>» data-qty=»<?= $item[‘qty’];?>» data-weight=»<?=$item[‘weight’];?>»>
<i class=»bi bi-dash-circle-fill text-success»></i>
</span>
<span class=»qty»><?= $item[‘qty’];?></span>
<span class=»qty-plus» onclick=»qtyPlus(); return false;» data-id=»<?=$id;?>» data-qty=»<?= $item[‘qty’];?>» data-weight=»<?=$item[‘weight’];?>»>
<i class=»bi bi-plus-circle-fill text-success»></i>
</span>
</td>

js:
 

// Изменение количества товара в заказа — плюс
function qtyPlus() {
$(‘.qty-plus’).on(‘click’, function(){
let str = $(this).data(‘id’);
if(typeof str === ‘string’){
let id_arr = str.split(‘-‘),
id = id_arr[0],
mod = id_arr[1],
qty_update = $(this).data(‘qty’)+1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}else if(!Number.isNaN(str)){
let id = $(this).data(‘id’),
mod = null,
qty_update = $(this).data(‘qty’)+1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}
});
return true;
}
// Изменение количества товара в заказа — минус
function qtyMinus() {
$(‘.qty-minus’).on(‘click’, function(){
let str = $(this).data(‘id’);
if(typeof str === ‘string’){
let id_arr = str.split(‘-‘),
id = id_arr[0],
mod = id_arr[1],
qty_update = $(this).data(‘qty’)-1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}else if(!Number.isNaN(str)){
let id = $(this).data(‘id’),
mod = null,
qty_update = $(this).data(‘qty’)-1,
weight = $(this).data(‘weight’);
$.ajax({
url: ‘/cart/add’,
data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
type: ‘GET’,
success: function(res){
showCart(res);
},
error: function(){
alert(‘Ошибка! Попробуйте позже’);
}
});
}
});
return true;
}

Суть в том, что клик срабатывает только со второго раза… Почему?
Страница: https://shop-site.su/category/men

Нужно положить товар в корзину и либо в модальном окне, либо перейти на страницу оформления заказа (а лучше и там и там покликать) и покликать на плюс и минус кол-ва товара.

Решил проблему:
убрал из html вызов функции onclick=»qtyMinus(); return false;»

а js переделал вот так:
$(‘body’).on(‘click’, ‘.qty-minus’, function(){…});

Но вот ответ на вопрос почему, все же хотелось бы знать.