Extra white space after h2 when inside list

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

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

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

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>