Stats Preview card with full explanation using Flex-box and Mobile Fi

Community feedback

• 

  T

  Grace•31,830

  @grace-snowPosted about 2 years ago

  Hi again

  This is using padding and margin in a strange way, making everything really complex in the text side of the card, and even the component itself (padding on the body and side margin on the card).

  Padding is for internal spacing. Think boxes. It's for creating space from the boundary. Padding will never collapse, so if two items have padding, double the space.

  Margin is for external spacing. This often only goes in one direction, or along one axis. Think block elements and creating space between them. Margin collapses, so if a heading has margin bottom and paragraph has margin top, the two margins will overlap and take up the same space on screen.

  On the text side of the card I would expect to see

  • padding on that half of the card
  • direct children of heading element, paragraph and list
  • margin top/bottom only on those three elements, no padding. They are all block level elements containing text content, so only need space between not inside.

  On the stats list, it is flex so again you don't need margin on elements inside or padding on that. Use the gap property and justify-content space-between

  All of this is really important to refactor and get comfortable with as it will become really difficult to manage larger projects later on if you use margin and padding so haphazardly. Have devtools open on the side of your browser, zoom in and out often and inspect a lot with devtools. Don't add extra divs unless you really need them and try to be really consistent in your use of margin/padding

  Marked as helpful

  1

  ---

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted about 2 years ago

  @grace-snow thanks so much 😊

  Thanks once again, this is priceless

  0
• 

  Raajzz•70

  @RaajzzPosted over 2 years ago

  Hello Hamzat, your solution was amazing, you especially nailed the responsiveness aspect of it, I do however wanted to share a cool property you can add for paragraphs, called line-height, this'll increase the space in between the lines of the paragraph.

  It is also recommended to use a minimum 1.5 or 1.6 as this will help people with cognitive concerns or other disabilities.

  Marked as helpful

  1

  ---

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  @Raajzz thanks so much, I really like that. I'll add this link to the explanation in The code

  1