-1

How do I get rid of the white space between the header/Title and body? I would like them to have no space or at least change that white space area to be a matching gray background like the body has.

enter image description here

</div>
    <div class="columns">
      <p class="thumbnail_align">&nbsp; </p>
      <h4 class="secondaryWindowHeader1">TITLE</h4>
      <p class="secondaryWindowBody2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
Summer
  • 69
  • 7

3 Answers3

2

The <p> and <h4> elements both come with some built-in margin in most (all?) browsers. You can remove it by hand by setting margin: 0, like this:

p{
  background: blue;
  margin: 0;
}

h4{
  background: green;
  margin: 0;
}
</div>
    <div class="columns">
      <p class="thumbnail_align">&nbsp; </p>
      <h4 class="secondaryWindowHeader1">TITLE</h4>
      <p class="secondaryWindowBody2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
Jake
  • 862
  • 6
  • 10
  • 1
    Thank you! I also added a little bit of padding to it so that it had space but it kept the gray background color there as well by using padding-top: 25px; – Summer Mar 06 '23 at 00:23
1

</div>
    <div class="columns">
      <p class="thumbnail_align">&nbsp; </p>
      <h4 class="secondaryWindowHeader1" style="margin:0;">TITLE</h4>
      <p class="secondaryWindowBody2" style="margin:0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
    </div>
ProfDFrancis
  • 8,816
  • 1
  • 17
  • 26
  • Thank you! I also added a little bit of padding to it so that it had space but it kept the gray background color there as well by using padding-top: 25px; – Summer Mar 06 '23 at 00:23
0

Add this to the top of your css, this is a good practice to remove all default paddings and margins:

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }
Dennis
  • 78
  • 7
  • There is very little point to this, if you are writing your own margin/padding on the elements you're just overwriting the global element structures... Maybe if you're writing a small codepen with one element, sure why not... – Cameron Shearer Mar 06 '23 at 00:19
  • I have to politely disagree with you. After doing this you don't have to override default margins and paddings for virtually each element, which makes life easier. Also using box-sizing: border-box allows for easier sizing. I learned it from books and classes I took and other developers, it works for me. And I am not saying that you are wrong, I am just saying that I have a different opinion. – Dennis Mar 06 '23 at 00:26
  • Typo `pudding`?, I don't understand what you mean, if you setting the global structure to `0` on both padding and margin, then proceed to create a new class/id then whilst changing padding/margin on said element, adding `*` does nothing. – Cameron Shearer Mar 06 '23 at 00:28
  • try your self. Had the author of this post done this, he would not have to ask this question and override properties. Like I said I am not saying u r wrong. I just have a different opinion on this matter. – Dennis Mar 06 '23 at 00:30
  • quick google search : (https://www.thoughtco.com/css-zero-out-margins-3464247 ) (https://blog.bitsrc.io/using-the-css-star-selector-to-zero-out-margins-and-paddings-bf4c074b83dc) – Dennis Mar 06 '23 at 00:34