如何在填充父项中嵌入嵌套元素？

Question

我正在尝试将一个元素嵌套在另一个元素中，然后通过填充（在父元素上）/ margin（在子元素上）有效地使它具有边框，但元素总是在元素之外延伸。

ex：https://jsfiddle.net/DTcHh/34916/

<div class="container">
<div class="col-md-12 bg">
    <div class="row">
        <div class="col-md-12 content">
            <div>
            Test
            </div>
        </div>
    </div>
</div>

.bg {
    background-color: yellowgreen;
}

.content {
    color: white;
    background-color: purple;
    margin: 50px;
}

如何让紫色的线留在果岭内但保持边缘？

Answer 1

.bg {
	background-color: yellowgreen;
  padding: 50px;
}

.content {
	color: white;
	background-color: purple;
}

<div class="container">
    <div class="col-md-12 bg">
		<div class="row">
			<div class="col-md-12 content">
				<div>
				Test
				</div>
			</div>
		</div>
	</div>
</div>

在.content中删除您的保证金，并在.bg

中添加padidng