Why isn't 'margin-bottom: 3px;' not working in 'label' element?

I am trying to get the following code to work. In particular, I want to style one of the “label” elements of a form to make the name for the text field to have more space before the next “label”. The code is below:

<!DOCTYPE html>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="fname" style="margin-bottom:20px;">First name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br>
  <label for="lname">Last name:</label><br><br>
  <input type="submit" value="Submit">

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>


Why isn’t this code working?

<label for="fname" style="margin-bottom:20px;">First name:</label><br>


for this kind of situations, its always better use “repl/codepen” kind of environment for interactivity, it gets easier to offer help, perhaps consider doing that, happy learning :slight_smile: