Hey everyone,
Take a look at my tribute page. Had a lot of fun working through this. Took me a second to get that pesky <ul> aligned correctly.
As you’ll see I like to add colors to my elements to see where they are spaced, how much space they take up in their parent elements, etc.
Let me know what you think, thanks!
Thanks @camperextraordinaire! Really appreciate your thoughtful feedback. Looks like you’re a leader on the site here, very happy to meet you and have you as a resource.
In answer your question about the space between the top yellow section (which is actually my Bootstrap .container) and the white background <ul>:
One of the most difficult parts of learning CSS, and the Bootstrap framework as an extension, is that it’s so hard to know what all of the default values are for all the different properties related to an element.
So for example, in BS3 the <ul> element has a default margin-top: 0px while its default margin-bottom: 10px.
I’m no expert, but that doesn’t make a lot of sense to me. I would figure, like you mentioned, that an element should default with equal top and bottom margin (and right and left margin as well for that matter).
To complicate matters further the <h3> element I use right beneath the <ul> has margin-top: 20px and margin-bottom: 10px !
I had to download the actual CSS file of BS3 to dig through and find the <ul> and <h3>default values. Let me know if you understand why the default values are so whacky and if you know an easier way to learn default values.
Thanks again.
Awesome, just what the doctor ordered 