Adding space between <h1>,<h2>...<h6> and <p>

Hi Everyone,
Need your awesomeness and best practice for the best way to create separation between a heading and paragraph elements. Here is the deal:

  • Background: working on knowledgement management platform that allows a user to create content and share with others for educational purposes.

  • Problem: Every time a user adds a heading followed by a paragraph the separation between both elements is minimal and I want to change that. Also, the separation between one paragraph and another is minimal.

Should I use padding or margin for each respective heading or p element?

Here is my code:
body, p {
font-family: ‘CernMed’, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}

h1, h2, h3, h4, h5, h6, p{
color: #0c0c0c;
margin: 0;
}

h1 {
font-family: ‘CernLight’, sans-serif;
font-size: 54px;
font-weight: 200;
line-height: 1.1;

}

h2 {
font-family: ‘CernLight’, sans-serif;
font-size: 38px;
font-weight: 200;
line-height: 1.2;
}

h3 {
font-family: ‘CernBold’, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}

h4 {
font-family: ‘CernBold’, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.2;
}

h5 {
font-family: ‘CernBold’, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}

h6 {
font-family: ‘CernBold’, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}

The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element. it means that your element does not know about its outside margins , so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can

From Google