Bassie Bassie - 5 months ago 18
HTML Question

Non-Asp H3 Element Creating Gap on Page

I have the following

.aspx
page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="BootStrap.css" rel="stylesheet" type="text/css" />
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar" class="col-xs-12"></div>
<h3> Loading... </h3>
</body>
</html>


Where, after adding the
h3
tag I am seeing a gap above the
navbar
element:

enter image description here

After removing the
H3
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

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
}