Skip to content
Submitted about 3 years ago

Order Summary Card with HTML and CSS

Brian•60
@briansegura15
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I was wondering why this code piece worked, * { margin: 0 }..... but not html { margin: 0 }.... Had a hard time finding out what was messing up my spacing lol.

Code

Please log in to post a comment

Log in

Community feedback

  • Kent O'Sullivan•1,870
    @12Kentos

    I could be wrong about this, but I'm pretty sure going off of what @rafaeltakano said using html { margin: 0 } is setting the html element to that property. Margin isn't automatically inherited by it's child elements (This is where I could be wrong, but I'm pretty sure that's the case.)

    Using the * selector like mentioned in the previous comment, will set all of the elements to a value of margin: 0 * is a universal selector, thus selecting every single element you will use while html is not.

    Marked as helpful
  • Rafael Takano•180
    @rafaeltakano

    Hi there! ✌

    Great job on your solution! It looks great and it's responsive!

    About your question, the html { margin: 0 } will make the <html> tag have margin of value zero.

    using the * selector, it will set all tags the value of margin: 0, not only one tag

    Hope it helps!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord