【web前端】23.解决内部div的margin影响外部div的margin

有一个内部的div里面包含div.

.html

<div id="container">
  <div id="inner"></div>
</div>

.css

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

我希望内部的div距离外部的div有一定的距离，但是给内部div加上margin以后，这个margin值会作用到外部div上，显然这不是我想要的，解决方法：

（1）给外部div加overflow：auto

（2）给外部div加边框border