How to reduce vertical spacing between H2 header and html div-CodePudding

I have a section on my github personal repository readme where a list my skill set, but the standard vertical spacing between the text of the section and the div right below is a bit exaggerated...

(see the picture picture discribing the issue)

Note in the attached picture that I already tried to set margin and padding to 0px but nothing changed.

CodePudding user response：

The spacing seems to be happening because of the spacing on the h2 itself and not the div. Try setting the padding and margin of the h2 to 0 and see if that fixes it.

Additionally, you can Right Click on the element where the spacing is occurring and select Inspect Element. This will allow you to check what is causing the gap in the "Computed" tab of the Styles panel.

Another nifty tip is setting the box-sizing, margin and padding of all elements to 0 from the get go. This way you'll be able to manually control the spacing across all your elements without any unexpected gaps that you need to debug later.

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<h2>Heading 2</h2>
<div>Test Div</div>