Есть ли способ обнаружить краевое столкновение и предотвратить его?например, если у меня есть
<div style="margin-bottom: 10px;"></div> <div style="margin-top: 10px;"></div>
между ними я получаю 20px, но вместо этого мне нужно 10px?
Вам не нужно ничего делать; в соответствии со спецификациями блочной модели смежные нижнее и верхнее поля будут сворачиваться , поэтому вы получите 10-пиксельный разрыв между вашими двумя <div> элементами, а не 20-пиксельный разрыв. См. этот предварительный просмотр jsFiddle .
<div>
РЕДАКТИРОВАТЬ: причина, по которой вы не видите коллапс между <table> и <div>, заключается в том, что для таблицы установлено значение display: table по умолчанию, что не совсем то же самое как элемент уровня блока, поэтому по спецификациям поля не будут разрушаться.
<table>
display: table