Adding top & bottom margin

HTML-CSS
1

I’m creating a blackjack game and having trouble adding top & bottom margin to a button after adding display block and centering it using margin auto.

2

Can you show us the CSS you are using?

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

3 
body {
  background: url(images/Green-chalk-background.jpg);
  background-size: cover;
  color: white;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-align: center;
  font-weight: bold;
}

h1 {
  color: goldenrod;
}

#message-el {
  font-style: italic;
}

button {
  background-color: goldenrod;
  width: 170px;
  color: #016f32;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 4px;
  font-weight: bold;
  font-size: 20px;
  border-radius: 6px;
  border: none;
}
4

Based on the CSS above, I don’t see where you set it to display block or centered it with auto margins.

5 
body {
  background: url(images/Green-chalk-background.jpg);
  background-size: cover;
  color: white;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-align: center;
  font-weight: bold;
}

h1 {
  color: goldenrod;
}

#message-el {
  font-style: italic;
}

button {
  background-color: goldenrod;
  width: 170px;
  color: #016f32;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  margin: auto;
  margin-bottom: 4px;
  font-weight: bold;
  font-size: 20px;
  border-radius: 6px;
  border: none;
}
6

Nevermind. My page fixed itself.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.