<h2>background-clip: border-box;</h2> <div id="border-box"> <p>This paragraph is the content.</p> </div> <h2>background-clip: padding-box;</h2> <div id="padding-box"> <p>This paragraph is the content.</p> </div> <h2>background-clip: content-box;</h2> <h3>browser default paragraph margins</h3> <div id="content-box"> <p>This paragraph is the content.</p> </div> <h2>background-clip: content-box;</h2> <h3>外边距设置为0</h3> <div id="content-box"> <p class="nomargin">This paragraph is the content.</p> </div>
div { background-color: yellow; width: 225px; padding: 1em 0; border: 5px solid rgba(156, 224, 251, .5); } .nomargin { margin: 0; } #border-box { background-clip: border-box; } #padding-box { background-clip: padding-box; } #content-box { background-clip: content-box; } /* styling for the Pen, unrelated to background-clip */ body { font-family: sans-serif; } div { margin-bottom: 2em; }