CODEWITHSUNDEEP
htmlcss
AG_
AG_

Reputation: 2689

Top margin of p tag taking extra space

Top margin of <p> is going out of <div>, which creates a space between two div as you can see in the below snippet. The blue color div should start after green color div. How to remove this space.

#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;
}
<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>

Upvotes: 2

Views: 974

Answers (4)

Priyank Gajera
Priyank Gajera

Reputation: 152

.dslc-theme-content-inner p {
   margin:0px;
}

Upvotes: 0

Kartik Bhalala
Kartik Bhalala

Reputation: 392

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

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

Upvotes: 0

shubham agrawal
shubham agrawal

Reputation: 3541

Just add margin:0 and padding:0;

Like this:

p {
  margin: 0;
  padding: 0;
}

The updated snippet:

#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>

Upvotes: 1

Anshul
Anshul

Reputation: 128

I have edited your code. You can simply give class name to that p tag and remove padding and margin.

#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>

Upvotes: 1

Related Questions