Step 60 margin: 1em auto;

HTML-CSS
1

after a week of some confidence building , this “build a registration form” has zapped my confidence even worse then the “build markers” exercise. i cannot grasp and understand how i could ever possible learn the 10x ways of setting margins , auto, jumping between px, em, %…the ways in which you move things around seem ad infinitum…one block your using this color combo, another one here another one there. things like " lets move the submit button to be more inline with the rest of the form" where as i see it , its perfect.

pre-question…why is “bold B” ** and italics * and " " : <? could someone explain whats going on here with this stuff?

Step 60

"Lastly, for the submit button, you want to separate it from the fieldset above, and adjust its width to never be below 300px.

Change the margin property to include 1em on the top and bottom, while leaving the right and left margins set to auto. Then set the width as described above."
if not for Github posting the HTML&CSS i would have been here forever. how does “margin 1em auto” change the left and right margin? if "em is a unit doubling the size of a “previous” or “former”, previous what? where?
the width is set to 60% of idk what, while it sets a minimum width of 300px? 60% of what? i feel like if your setting a “minimum” of something its because somewhere else code will change the width so your setting this submit to never fall below 300px? and why arnt we just setting sometype of “1em”? if that even makes sense, guess im just trying to illustrate my level of confusion.

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
2

“em” is relative to the font size of its parent element. “1em” would be the same font size as the parent. “2em” would be twice as big as the parent. “0.5em” would be half as big as the parent. Basically, the number is a multiplier.

It’s sort of a little trick. Setting both left and right margins to auto on a block level element will cause the browser to center it horizontally.

Of it’s parent container.

2 Likes
3

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