CSS CSS Layout Basics CSS Layout Project Introducing the Project

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

Why is my h1 appearing as an in-line as opposed to a block?

Hey guys,

I've been referring back to this video and for some reason, my project is acting weird.

In my header, I have a name element attached to an h1. However, for some reason, it shows up as an inline box when I put a border over it? I also see there's some sort of vertical margin collapse between the header and the h1 element.

Shouldn't the h1 element attached to the name tag be appearing as a block by default? This is a little weird to me. I tried to fix the margin collapse but nothing seems to be working for me.

https://github.com/apasric4/FEWD-project-2

1 Answer

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,806 Points

Hey Amandeep!

Holy smokes it really took me a minute to find the error here. I can DEFINITELY see where your confusion was.

You have beautifully formatted code and everything looks ALMOST spot on... except those pesky h1 tags.

Finally.. after trying to figure out why my h1 tags that I added were working and the ones you had added weren't, out of the corner of my eye I realized you had accidentally put "<hl>" (as in a lower-case "L").

The moment you change that you should be back up in running shape!

Your acknowledgement that your h1 SHOULD be a block level element by default was the key in figuring out the issue, so know you're already in the right headspace!

I guess maybe the lesson here is that it doesn't hurt to try rewriting a line if you're stumped, but this could've happened to anyone.

Keep up the excellent work and best of luck!

-Jake