Extra white space after h2 when inside list - html

Question

Major Edit: Turns out my issue was not repeated exactly the same here. My issue appears when using bootstrap, and is not fixed when using margin:0px;. See the updated code for the persisting issue.
I am building an ordered list of text, and noticed a slight issue. When I nest other elements inside of a li element, I get a good amount of extra white space between the individual elements that is not controlled by margin or padding. Throwing a border onto these elements reveals that each of the nested elements does not control that white space (seemingly).
My question is how do I control the amount of extra white space?
Demo of this issue:
#questionList li {
font-size: 3em;
margin-left: 3em;
}
#questionList li h2 {
border: 1px solid red;
font-size: 45px;
margin:0px;
}
#questionList li small {
border: 1px solid red;
font-size: 14.72px;
margin:0px;
}
#questionList li p {
border: 1px solid red;
font-size: 16px;
margin:0px;
}
<link href="http://bootswatch.com/paper/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<ol id="questionList" class="col-sm-8 col-sm-offset-2">
<li>
<h2>Qg</h2>
<small>sub header</small>
<p>P1</p>
</li>
<li></li>
<li></li>
</ol>
</div>
</div>

Answer 1

Paragraphs and headers do indeed have default margin, as demonstrated below, if we set the margin for each equal to zero.
ol li h2 {
border: 1px solid red;
}
ol li small {
border: 1px solid red;
}
ol li p {
border: 1px solid red;
}
h2,
p {
margin: 0;
}
<ol>
<li>
<h2>
Header
</h2>
<small>
Sub header
</small>
<p>
paragraph of text
</p>
</li>
<li>
<h2>
Header2
</h2>
<small>
Sub header2
</small>
<p>
paragraph of text2
</p>
</li>
</ol>

Answer 2

This is indeed controlled by the margin on the individual elements.
Fiddle for example here: https://jsfiddle.net/25f3bcwr/
ol li h2 {
border: 1px solid red;
margin:0px;
}
ol li small {
border: 1px solid red;
margin:0px;
}
ol li p {
border: 1px solid red;
margin:0px;
}

Answer 3

This is because headers if not defined, by default they posses some default characteristics e.g their size, spacing, font-weight.
I believe, those are not white spaces White spaces are created using .
Try to use display:inline-block; or display:inline; and then ad break line in the css style and then add break line code at the end of your sentence<br> see some difference
ol li h2 {
border: 1px solid red;
display: inline;
}
ol li small {
border: 1px solid red;
display: inline;
}
ol li p {
border: 1px solid red;
display: inline;
}
<ol>
<li>
<h2>
Header
</h2><br>
<small>
Sub header
</small><br>
<p>
paragraph of text
</p>
</li>
<li>
<h2>
Header2
</h2><br>
<small>
Sub header2
</small><br>
<p>
paragraph of text2
</p>
</li>
</ol>
Result