Why does my Contact Me form not match the template I am copying from?

HTML-CSS
1

Here is my code https://code.sololearn.com/WIWJvKsVl4hq/#css

Here is the code for the template I am copying off of https://code.sololearn.com/WRIjh46xa13D/#css

  1. My code’s section is shorter than the original module’s section and I can’t figure out why.
  2. For my Contact Me heading with its dashed box border, what is the point of margin bottom when the padding seems to take care of that? Padding in this case was understood as the space between the word itself and the first input box and completely ignored the border all together. I am very confused. Here’s some pictures to show what I mean:
    contactme1 contactme2

Here is my code https://code.sololearn.com/WIWJvKsVl4hq/#css

Here is the code for the template I am copying off of https://code.sololearn.com/WRIjh46xa13D/#css

2

  1. You have text-area as the selector, it should be textarea.

  2. Padding is on the inside of the element box, margin is on the outside.

1 Like
3

I am looking through your box model link now. To be clear, I set a background color to my header element to see the padding. The entire grey area is the element’s padding, correct? and the white space on all its sides is it’s margin? Does it’s bottom margin end where the email input begins?
contactme3

4

I can really only go by the code you posted a link to and not screenshots. But yes the h1 bottom margin ends where the form element begins. If you give an element a background color its width/height + padding will be the area that has the color, any margin is outside the box and is transparent.

I suggest learning the browser developer tools (Video). The DOM Inspector (Chrome or Firefox) is super helpful in better understanding your layout and the box model.

1 Like