带有子P元素的DIV - 这个边距来自哪里？

Question

我在wrapper-div中有三个div。

不包含子元素，div按预期运行：每个div都在它之前的兄弟之后。它们之间没有余地。

html, body {
  width: 100%;
  height: 4000px;
  background-color: rgba(245, 245, 245, 1.0);
}

.wrapper {
  width: 1000px;
  margin: 50px auto;
}

.rect {
  height: 300px;
  background-color: crimson;
}

.orange {
  background: linear-gradient(180deg, pink, orange);
}

.orange p {
  position: relative;
}

<div class="wrapper">		 
  <div class="rect"></div>
  <div class="rect orange"></div>
  <div class="rect"></div>
</div>

现在我在第二个div中添加了两个段落。

html, body {
  width: 100%;
  height: 4000px;
  background-color: rgba(245, 245, 245, 1.0);
}

.wrapper {
  width: 1000px;
  margin: 50px auto;
}

.rect {
  height: 300px;
  background-color: crimson;
}

.orange {
  background: linear-gradient(180deg, pink, orange);
}

.orange p {
  position: relative;
}

<div class="wrapper">		 
  <div class="rect"></div>
  <div class="rect orange">

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
      dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus.</p>

  </div>
  <div class="rect"></div>
</div>

现在我可以在第一个和第二个div之间获得这些余量。

在包装器的顶部和底部边缘旁边：没有以任何方式定义边距。

这些保证金来自哪里？

Answer 1

保证金来自哪里？

• 浏览器使用css默认值。
• 如果您未指定代码，则使用默认值。
• 默认值因浏览器而异。这很好 练习始终重置（默认）开头的所有常用值 你的样式表。

为什么边距会产生这种影响？

根据spec

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

这意味着带边距的嵌套元素会将其边距添加到内容元素中。

下面我添加了保证金值的重置：

p { margin:0; }

但是，您应该使用完全重置来防止应用默认值。

/*---------------------------------------------------------------------------------
GLOBAL RESET
---------------------------------------------------------------------------------*/
html, body, div, span, h1, h2, p, th, td, a, em, img, strong, ul, li, form, label, h1, h2, h3, h4{margin:0; padding:0; border:none;}
:focus{outline:none;}
html{box-sizing:border-box;}
*,*::before, *::after{box-sizing:inherit;}
html,body,form{height:100%;position:relative;}


html, body {
  width: 100%;
  height: 4000px;
  background-color: rgba(245, 245, 245, 1.0);
}

.wrapper {
  width: 1000px;
  margin: 50px auto;
}

.rect {
  height: 300px;
  background-color: crimson;
}

.orange {
  background: linear-gradient(180deg, pink, orange);
}

.orange p {
  position: relative;
}

<div class="wrapper">		 
  <div class="rect"></div>
  <div class="rect orange">

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
      dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus.</p>

  </div>
  <div class="rect"></div>
</div>

CSS RESET

网上已有许多重置。但是我建议您自定义重置以仅使用应用的值。

<强> MEYERS RESET

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

SIMPLE RESET

html, body, div, span, h1, h2, p, th, td, a, em, img, strong, ul, li, form, label, h1, h2, h3, h4{margin:0; padding:0; border:none;}
:focus{outline:none;}
html{box-sizing:border-box;}
*,*::before, *::after{box-sizing:inherit;}
html,body,form{height:100%;position:relative;}

Answer 2

1. <p>代码具有默认边距

2. 如果<p>标记位于div元素内且没有边距，则p的“外部”边距将添加到div