I have the below code
input[type="submit"] {
display: block;
width: 60%;
min-width:300px;
margin: 1em;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
}
I want to change the margin
property to include 1em
on the top and bottom. I want to use the existing margin
property to include 1em
on the top and bottom.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
You can use the margin-top
and the margin-bottom
separately,
Or u can use the margin
property and set the top and bottom to 1em and the left and right to 0.
how do i implement the second option that you gave please
Using the margin property you can declare it using two values,
You might be knowng to declare margins using 4 values. Similarly you can declare the margin with two value, the first for the top and bottom values, the second for left and right values.
Example:
margin: top-bottom left-right /* This is the syntax */
/*Example*/
margin: 10px auto; /* This sets the top and bottom margin to 10px and the
left and right to auto */
Using just margin
is the shorthand version. To understand it better I suggest you look over this page from MDN.