Вместо того, чтобы явно включать все возможные символы, Вы могли сделать regex, чтобы проверить на присутствие запрещенных символов и сообщить об ошибке тогда. Идеально Ваше приложение должно назвать файлы точно, как пользователь желает, и только грязно ругайтесь, если оно спотыкается через ошибку.
That is the expected behavior*. There are a few ways to get around it. If you float the divs, they will contain the margins of child elements and prevent margin collapsing. Another approach is to add a border or padding to the divs.
* The margins of the div and the p "combine to form a single margin", even though they are nested, because they have adjoining margins with no padding or border between them.
Setting a positive padding, and a corresponding negative margin on the div
element seems to fix the issue, though I know not why.
<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>