108 — CSS Tricks and Recipes.

Reduce vertical space between Adjacent siblings

<style>
  h1 + h1 {
    margin-top: 0px;      
  }
</style>

This will remove margin-top on the second H1. The vertical space between the two H1 will be margin-bottom of the first one.

Center an element inside a flex-column container

<div class="vbox">
  <pre>
  some text here.
  </pre>
</div>

pre will be aligned left in the vbox (default behavior). To center pre, use the following css rule. To center all elements in the vbox, style the vbox with "align-items:center;" instead.

<style>
  pre {
    align-self: flex-start;
  }
</style>

Controlling image size

<hbox style="width:100%; border:1px solid blue;margin-top:30px;">   
<img src="./113-sba-airport-google.png"
    style="object-fit: scale-down; width:100%;">
</hbox>
<hbox class="caption">Applied to Google Earth (png)</hbox>

Media query for Samsung TAB S6 lite

@media (device-width: 800px)
  and (min-device-height: 1333px)
  and (max-device-height: 1334px)
  /*and (device-height: 1333px)*/
  and (orientation: portrait)
  and (-webkit-device-pixel-ratio: 1.5)
  and (-webkit-device-pixel-ratio : 1.5)
  {

/* CSS GO HERE 2000x1200*/

That is because the exact value is 1333.333 px. It seems that device-pixels is in JS units, not CSS units. Confusing.(June 2022)

Lists can generate overfull hboxes.

See 126-sprinterUp.

nbsp in content tag

&nsdp; (non breaking space) cannot be used, instead use escaped character in utf8.

p a::before {
  content: "→\00a0";                     
}

h3::before {
  content: '▶\2003';
  font-size: 0.6em;
}

Note: \2003 for an emsp.

also:

    ▲ - U+25B2 BLACK UP-POINTING TRIANGLE
    ▼ - U+25BC BLACK DOWN-POINTING TRIANGLE
    ▴ - U+25B4 SMALL BLACK UP-POINTING TRIANGLE
    ▾ - U+25BE SMALL BLACK DOWN-POINTING TRIANGLE

text-size-adjust

If set to auto, the font-size will decrease when the container element, width is reduced (most likely a paragraph). Intended for mobiles. Disable that function, when css is designed for mobile. → https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Reset, new css reset

https://www.joshwcomeau.com/css/custom-css-reset/

https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/

The following should go in Guideline in CSS coding.

101 - body: remove margins, padding
102 - body: set font-size according to device (using media query)
103 - first and only child in body should be a vbox (center column) set width to 100% for mobiles, 800pt for desktop (80 characters at 10pt).
104 - <a> does not inherit font-size from parent.

→ stackoverflow.com/questions/10307317/best-practice-for-font-size-inheritance

→ css-tricks.com/how-to-section-your-html/#the-main-element

→ madebysidecar.com/journal/google-fonts-part-3-favorite-combinations#