title: Why does html fieldset element did not work correctly?
body: <p>I have a page which renders four textboxes.  The top three textboxes should be grouped logically as engine settings.  Thus, I used <code>&lt;fieldset&gt;</code> tag to group the controls accordingly.  However, it appears that <code>&lt;fieldset&gt;</code> display a horizontal line beneath the <code>&lt;legend&gt;</code> "Engine Settings" text (screenshot below).</p>
  
  <p>I wonder why it didn't work? Did I miss something in my html or style rule definition? Also, I couldn't find any related issue in SO.  I'm a newbie in HTML and CSS so please bear with me.</p>
  
  <p><a href="https://i.stack.imgur.com/oSgSG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oSgSG.png" alt="enter image description here"></a></p>
  
  <p>Snippet of html elements in my page with style rules which I have defined for the <code>&lt;fieldset&gt;</code> element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hm-property {
    margin-top: 10px;
  }
  
  .hm-fieldset {
    margin-top: 12px;
    width: 505px;
    height: 175px;
  }
  
  .hm-legend {
    font-size: 15px;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #555;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hm-editorslist"&gt;
    &lt;label class="hm-fieldItemLabel"&gt;Heatmap Engine Editors:&lt;/label&gt;&lt;select class="hm-fieldItemBig" id="hmeditorcbo"&gt;&lt;/select&gt;
    &lt;div class="hm-EditorAdd glyphicon glyphicon-plus" id="btnNewHMEditor" title="Add New Heatmap Engine Editor"&gt;&lt;/div&gt;
    &lt;div class="hm-EditorRemove glyphicon glyphicon-remove" id="btnDeleteHMEditor" title="Remove Selected Heatmap Engine Editor"&gt;&lt;/div&gt;
    &lt;span class="alert-info pageAlertBox LoadHMTemplate-info" style="display:none;"&gt;&lt;strong&gt;Loading.....&lt;/strong&gt;&lt;/span&gt;
    &lt;div&gt;
      &lt;fieldset class="hm-fieldset"&gt;
        &lt;legend class="hm-legend"&gt;Engine Settings:&lt;/legend&gt;
        &lt;!--Engine Destination Folder textbox--&gt;
        &lt;div class="hm-property"&gt;
          &lt;label class="hm-fieldItemLabel"&gt;Destination Folder:&lt;/label&gt;&lt;input type="text" class="hm-textboxes" id="hmEngineDestFolder" title="The relative destination path of engine" /&gt;
        &lt;/div&gt;
  
        &lt;!--Engine Integrity Refresh Rate textbox--&gt;
        &lt;div class="hm-property"&gt;
          &lt;label class="hm-fieldItemLabel"&gt;Integrity Refresh Rate:&lt;/label&gt;&lt;input type="text" class="hm-textboxes" id="hmEngineIntegrityRate" title="Engine's integrity refresh rate (in minutes)" /&gt;
        &lt;/div&gt;
  
        &lt;!--Engine Source Folder textbox--&gt;
        &lt;div class="hm-property"&gt;
          &lt;label class="hm-fieldItemLabel"&gt;Source Folder Path:&lt;/label&gt;&lt;input type="text" class="hm-textboxes" id="hmSourceFolder" title="The relative source path of engine" /&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/div&gt;
  
    &lt;!--GUI File Location textbox--&gt;
    &lt;div class="hm-property"&gt;
      &lt;label class="hm-fieldItemLabel"&gt;GUI File Location Path:&lt;/label&gt;&lt;input type="text" class="hm-textboxes" id="hmGUIFileLoc" title="Relative folder path to the file" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is greatly appreciated.</p>