109 — Things I learned

recently!

could be called Bite Sized Learning

101 <pre> generates a block having width of the parent. Lines never break, and will overflow in the container.

101.b Not true if parent is a flex-box. In this case <pre> will take the width of the longest line, possibly wider than the body. Use <pre> with caution.

102 The <main> element represents the primary content of the page. It is not supposed to feature any side bars or navigation elements in it. You also must not have more than one <main> element on the page unless all other <main> elements are hidden.

103 what is wrong in this CSS declaration:

    main {                                      
      display:block;
      margin: 0, auto;
      width:300pt;
    }

104 All elements in a flex container are of type 'display:inline'

105 Paragraphs: width 30em → 10 words per line. line-height: 1.2em to 1.4em (according to font)

106 line-height: If P has {line-height: 1.2em} the line-height will be adjusted when font-size change for the paragraph. so it's good to have p {line-height: 1.2em} in CSS.

107 media queries: width and device-width are not the same. Are you interested in is the width of the viewport no matter the device? sitepoint.com

108 The margin never collapses when the elements are aligned in flexbox or grid box, or they are not in-flow e.g. absolutely positioned or floated. Apr 23, 2021 geeksforgeeks.org/what-are-the-rules-of-margin-collapse-in-css/ Use row-gap instead ???

stackoverflow.com/questions/43882869/margin-collapsing-in-flexbox