What Is the Default Padding And/Or Margin For a P Element (Reset Css)

What is the default padding and/or margin for a p element (reset css)?

The CSS 2.1 specification has an default style sheet for HTML 4. It’s just informative and not normative so browsers may use it but do not have to.

Another resource could be the webdeveloper tools of the browsers. Most can show you the cascade of rules that were applied to a particular element. An example: Firefox and Safari (WebKit) seem to use margin: 1em 0px for p elements.

What is the default margin value of p tag?

Different Browsers are build upon different render engines.

Chrome and Safari are using the WebKit-render engine whereas Firefox uses Gecko.

The different engines are different not just because the software is different but also because they have different settings. Thats why most webpages look slightly different in differnt browsers.

The Answer:

In Chrome (webkit) the margin-top (above the element) and margin-bottom (below the element) of the <p> tag is 1em.

In Firefox (Gecko) all margins are 0 except the margin-bottom wich is 1em again.

The way to get rid of this problem is to make a CSS-reset.
The easyest to use would be the one by Meyerweb.

Do HTML Headings (h1 - h6) have a default padding in any browser?

Headings by default have a padding of 0. However, by default an H1 for example
has a top and bottom margin: .67em;. These top-bottom margins grow all the way to 2.33em for an H6. So for each heading, the top and bottom margins gradually increase by default.

Check out this helpful article by W3Schools which is insightful when discussing the defaults for all HTML elements.

So to answer your question. Yes, the padding: 0; is unnecessary. However, the margin: 0; will change the default top and bottom margins.

how to remove margin between elements

try to add margin: 0; on h4 and p tag

.profile h4, .profile p{
    margin: 0;
}

Removing body margin in CSS

I would say that using:

* {
  margin: 0;
  padding: 0;
}

is a bad way of solving this.

The reason for the h1 margin popping out of the parent is that the parent does not have a padding.

If you add a padding to the parent element of the h1, the margin will be inside the parent.

Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.

How to reset margin-bottom to its default value

I think the property you're looking for is unset.

unset resets the property to its inherited value if it inherits from its parent or to its initial value if not.
Via - Mozilla Docs

jsFiddle: http://jsfiddle.net/AndrewL32/65sf2f66/58/

div {  border: medium solid green;  margin: 10px 0px;}h2 {  margin-bottom:10px;}
/* but make those in the sidebar use the value of the 'color' property (initial value) */h2.specialHeader {  margin-bottom: unset;}

<div><h2>Normal Header</h2></div><div><h2 class="specialHeader">Special Header</h2></div>

.title{
  grid-template-areas:"image" "title"
}

.title_word{
   grid-area: title;
   margin-bottom: 0;
}

.title_img{
  grid-area: img;
}

<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>

p {
  margin-top: 0;
}