Bassie Bassie - 2 years ago 117
HTML Question

Non-Asp H3 Element Creating Gap on Page

I have the following


<!DOCTYPE html>
<html xmlns="">
<head runat="server">
<link href="BootStrap.css" rel="stylesheet" type="text/css" />
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div id="navbar" class="col-xs-12"></div>
<h3> Loading... </h3>

Where, after adding the
tag I am seeing a gap above the

enter image description here

After removing the
element, the gap disappears:

enter image description here

I also noticed that if I amend the tag so that it reads:

<asp:h3> Loading... </asp:h3>

the gap also disappears, however I then get this warning in VS:

Element 'h3' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing.

Does anyone know what is causing this gap to appear when using non-asp elements on an asp page? Also, is that warning something I should be worried about?

Answer Source

Headings (from h1 to h6) by default have margin, but because you are using bootstrap, it has it own styles applied to headings (in this case for h1 to to h3) which are:

h1, .h1, h2, .h2, h3, .h3 {
  margin-bottom: 10px;
  margin-top: 20px;

so you need to reset margin

in your case:

h3 {
  margin: 0
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download