占用额外空间的p标签的上边距

时间:2017-03-24 05:17:58

标签: html css

var rects = Enumerable.Range(1, 30) .Select(x => new Rectangle(x, x, x + 100, x + 100)); var bounds = Screen.PrimaryScreen.Bounds; Bitmap bigBmp = new Bitmap(bounds.Width, bounds.Height, PixelFormat.Format32bppArgb); Graphics g2 = Graphics.FromImage(bigBmp); g2.CopyFromScreen(bounds.X, bounds.Y, 0, 0, bounds.Size, CopyPixelOperation.SourceCopy); var bmps = rects.Select(rect => { return bigBmp.Clone(rect, PixelFormat.Format32bppArgb); }); 的上边距超出<p>,这会在两个div之间创建一个空格,如下面的代码段所示。蓝色div应该在绿色div之后开始。如何删除此空间。

&#13;
&#13;
<div>
&#13;
#dslc-module-6dbe075eac8 h1 {
  background-color: green;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom: 0px;
  min-height: 0px;
}

#dslc-module-a2d37913705 .dslc-tp-content {
  background-color: blue;
}
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:1)

我已经编辑了你的代码。 您可以简单地为该p标签指定类名,并删除填充和边距。

#dslc-module-6dbe075eac8 h1 {
  background-color: green;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom: 0px;
  min-height: 0px;
}

#dslc-module-a2d37913705 .dslc-tp-content {
  background-color: blue;
}

p {
  margin: 0;
  padding: 0;
}
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
  <div id="dslc-module-6dbe075eac8" class="dslc-module-front dslc-module-DSLC_TP_Title dslc-in-viewport-check dslc-in-viewport-anim-none  dslc-col dslc-12-col dslc-last-col  dslc-module-handle-like-regular  dslc-in-viewport" data-module-id="6dbe075eac8"
    data-dslc-module-id="DSLC_TP_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">




    <div class="dslc-tp-title">
      <h1>Difference between StringBuffer and StringBuilder</h1>
    </div>



  </div>
  <!-- .dslc-module -->
</div>
<div id="dslc-module-a2d37913705">



  <div class="dslc-tp-content">
    <div id="dslc-theme-content">
      <div id="dslc-theme-content-inner">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        </p>

      </div>
    </div>
  </div>

</div>

答案 1 :(得分:1)

只需添加margin:0 and padding:0;

像这样:

p {
  margin: 0;
  padding: 0;
}

更新的代码段:

#dslc-module-6dbe075eac8 h1 {
  background-color: green;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom: 0px;
  min-height: 0px;
}

#dslc-module-a2d37913705 .dslc-tp-content {
  background-color: blue;
}

p {
  margin: 0;
  padding: 0;
}
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
  <div id="dslc-module-6dbe075eac8" class="dslc-module-front dslc-module-DSLC_TP_Title dslc-in-viewport-check dslc-in-viewport-anim-none  dslc-col dslc-12-col dslc-last-col  dslc-module-handle-like-regular  dslc-in-viewport" data-module-id="6dbe075eac8"
    data-dslc-module-id="DSLC_TP_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">




    <div class="dslc-tp-title">
      <h1>Difference between StringBuffer and StringBuilder</h1>
    </div>



  </div>
  <!-- .dslc-module -->
</div>
<div id="dslc-module-a2d37913705">



  <div class="dslc-tp-content">
    <div id="dslc-theme-content">
      <div id="dslc-theme-content-inner">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        </p>

      </div>
    </div>
  </div>

</div>

答案 2 :(得分:0)

You can add one custom class to p tag and apply {margin:0} css to that class.

https://jsfiddle.net/kartik_bhalala/cuwkqg4g/

答案 3 :(得分:0)

.dslc-theme-content-inner p {
   margin:0px;
}
相关问题