Если не хочется гуглить и думать, то есть несколько вариантов решения.
1. Задать границу для внешнего блока (.black)
2. Задать паддинг для внешнего блока (можно 1px)
3. Создать новый поток (контекст) внутри внешнего блока (честно говоря забыл как это называется)/ Новый контекст создается если задать overflow отличный от visible, внутри flex и grid контейнееров, внутри таблиц, внутри плавающих элементов (float) и может еще что-то подзабыл.
4. Использовать паддинг вместо марджина для внутреннего элемента.
5. Не использовать марджин на внутреннем элементе, и заменить его на паддинг у внешнего.
и т.д.
