I developed a python back-end and is trying to design a html and javascript front end for my app. I am new to HTML.
The code is provided below
html{
font:normal 14px/1.5 Courier New;
}
h1{
margin: 7rem;
margin-top: 8rem;
}
form{
margin: 3rem;
width: 800px;
}
.form-IFS_DataLocation{
font-size: 1rem;
width: 100px;
position: absolute;
margin-left: 400px
}
.form-IFS_DataLocation button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.form-PDF_Location{
font-size: 1rem;
width: 200px;
position: absolute;
margin-top: 10px;
}
.form-PDF_Location button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.form-Output_Location{
font-size: 1rem;
width: 200px;
position: absolute;
margin-top: 10px;
}
.form-Output_Location button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.form-HighLight{
font-size: 1rem;
width: 200px;
position: absolute;
margin-top: 10px;
}
.form-Highlight button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}<!DOCTYPE html><html lang="en"><head><title>Working with HTML Forms</title><meta name="viewport" content="width=device-width"></head><body><h1><center>Test<center></h1><form id="form-user" action="#" method="post"><div class="form-IFS_DataLocation"><button id="button1">Shop Order</button><div><div class="form-PDF_Location"><button id="button2">PDF Drawings</button><div><div class="form-Output_Location"><button id="button3">Output</button><div><div class="form-Highlight"><button id="button4">Execute</button><div></form><script src="./test.js"></script></body></html>In the css portion of the code for the highlight button (ID: button4), changing the margin-top property is having no effect. From what I understand, it should move the button 10px below the button above.