search

SuperSimpleDev / html-css-course-2022

1.44k stars 1.06k forks source link

15f #2

Open tuanchuoi opened 2 years ago

tuanchuoi commented 2 years ago

Hi, In your 15f.html, when I place DOCTYPE html on the top, the overlay block doesn't fit in the "product-container" div. please check it, thank you for your work and this is the best course I've come across. p/s: you can change background-color to rgba(0, 0, 0, 0.15); in .bottom-overlay to see.

SuperSimpleDev commented 2 years ago

Oh no, looks like I forgot to add DOCTYPE html to many of the solutions. Thanks for finding this! I didn't know there was a subtle difference.

For some reason if you set:

display: block;

On the image the extra space will disappear (images by default are display: inline-block;)

display: inline-block; tends to have alignment issues since it's meant to represent objects like buttons or images inside a line of text so inline-block elements will add some extra space around them as if they are inside a line of text.

It must have changed in HTML 5 to always add this extra space, although I'm not exactly sure how it works 🤷‍♂️ I'll update the solutions though

dnhes commented 2 years ago

<!DOCTYPE html>

Exercis2
dnhes commented 2 years ago

hir sir..can u please check my codes .. ty