QR Code Component Using HTML and CSS

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 19 days ago

  Hi @Taylor-McNeil,**

  I've reviewed your solution, and I’d like to share my thoughts:

  1. Centering the <img> using Flexbox
     Since you used Flexbox to center <main>, you can apply the same approach to center your <img>. Just apply Flexbox properties to its parent (.qr-container-img):

     /* Make the parent a flex container */
     display: flex;  
     
     /* Center the image inside */
     justify-content: center;
     align-items: center;
     

  2. Understanding margin and padding
     You mentioned having trouble with spacing and found padding and margin to adjust the layout. However, it seems there’s some confusion about what they do. Here’s a clearer explanation:

     • An HTML element consists of content, padding, border, and margin.
     • padding is the space inside the element, between the content and the border.
     • margin is the space outside the element, creating distance from other elements.

     Visual Representation:

   MARGIN (space outside)
   ┌───────────────────────────┐  
   │                           │  
   │  BORDER (edge of element) │  
   │  ┌─────────────────────┐  │  
   │  │  PADDING (inside)   │  │  
   │  │  ┌───────────────┐  │  │  
   │  │  │  CONTENT      │  │  │  
   │  │  └───────────────┘  │  │  
   │  │                     │  │  
   │  └─────────────────────┘  │  
   │                           │  
   └───────────────────────────┘  
  
  

  Using this structure, you can better understand how spacing works and adjust it accordingly for the desired layout.

  Let me know if you need further clarification!

  Hope this helps!

  Marked as helpful

  1