html - 如何将嵌套元素放入填充的父元素中？

Question

我试图将一个元素嵌套在另一个元素中，然后通过填充(在父级上)/边距(在子级上)有效地使其具有边框，但元素总是延伸到元素之外。

例如: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