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

HTML-CSS
#1

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>
<html>
<body>

<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">
</form> 

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

</body>
</html>

Why isn’t this code working?

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

Thanks

#2

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: