En este tema vamos a ver algunas cosas básicas de CSS que se suelen confundir o que hay que poner siempre en cualquier proyecto.

El modelo de caja le dice al navegador si cuando indicamos el ancho, ese ancho incluye o no al padding y al borde. Por defecto no los incluye pero lo ideal es que el ancho si que incluya el padding y el borde, por eso hay que usar la propiedad "box-sizing: border-box" de CSS.

• box-sizing

.mi_caja {
  width: 80px;
  padding: 5px;
  border: 5px solid red;
  margin: 10px;
}

Como indicar correctamente el box-sizing:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  }

Se puede ver un ejemplo en https://codepen.io/logongas/pen/yyeOxGo

En la propiedad "display" de CSS hay muchos posibles valores , ahora vamos a ver 3 que se suelen confundir:

• display:inline: Para un elemento que forma parte de un párrafo. No se puede especificar el ancho y el alto.
• display:inline-block: Como "inline" pero se puede especificar el ancho y el alto.
• display:block: Después del elemento se genera un salto de linea y también permite especificar el ancho y el alto.

Se puede ver un ejemplo en https://codepen.io/logongas/pen/gbaVNyX

Se suelen usar tanto con el tag span como con div.

• Por defecto span tiene display:inline
• Por defecto div tiene display:block

Mas información:

• How to remove the space between inline-block elements?

• "display:none" es como si el elemento no existiera por lo que el resto de elementos se desplazan para ocupar su hueco
• "visibility:hidden" el element es invisible pero sigue ocupando su hueco.

Un ejemplo se puede ver en : https://codepen.io/CybMeta/pen/xGwoyd

Hace que un espacio con " " sea como una letra mas por lo que no partirá la frase por ese espacio.

Un ejemplo se puede ver en : https://codepen.io/logongas/pen/xbZVJMd

¿Alguna vez has notado que, incluso con una página HTML sin una sola línea de CSS propia, los navegadores ya aplican ciertos estilos? Esto no es un error, sino una característica: cada navegador incorpora un CSS por defecto conocido como "User Agent Stylesheet".

Por ejemplo, es habitual ver que el elemento <body> viene con unos márgenes aplicados de serie, o que las etiquetas de encabezado (<h1>, <h2>, etc.) no solo tienen un tamaño de fuente específico, sino también márgenes.

Esto introduce un desafío clave para el desarrollo: la inconsistencia. Los detalles exactos de estos estilos predeterminados a menudo varían ligeramente de un navegador a otro. Una cantidad de padding o un tamaño de fuente en un elemento pueden no ser idénticos en Chrome y en Safari.

Esta falta de uniformidad inicial complica el proceso de garantizar un look and feel exactamente igual en todas las plataformas. De ahí surge la necesidad de la técnica del Reset CSS para establecer un estilo común y consistente antes de aplicar nuestro diseño.

Algo que añadir siempre a nuestro Reset CSS sería:

html {
  box-sizing: border-box;
}
 
*, *:before, *:after {
  box-sizing: inherit;
  }
  
body {
  margin: 0;
  padding: 0;
}

¿Que ponemos en nuestro Reset CSS? Pues a lo largo del tiempo se han ido creando varios CSS que han ido quedando anticuados debido a los cambios en los navegadores. Yo me he decantado por usar el que utilizar Tailwind CSS llamado preflight.css

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  border: 0 solid; 
}

html,
:host {
  line-height: 1.5; 
  -webkit-text-size-adjust: 100%; 
  tab-size: 4; 
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); 
  font-feature-settings: --theme(--default-font-feature-settings, normal); 
  font-variation-settings: --theme(--default-font-variation-settings, normal); 
  -webkit-tap-highlight-color: transparent; 
}

hr {
  height: 0; 
  color: inherit; 
  border-top-width: 1px; 
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); 
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); 
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); 
  font-size: 1em; 
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

table {
  text-indent: 0; 
  border-color: inherit; 
  border-collapse: collapse; 
}

:-moz-focusring {
  outline: auto;
}

progress {
  vertical-align: baseline;
}

summary {
  display: list-item;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; 
  vertical-align: middle; 
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; 
  font-feature-settings: inherit; 
  font-variation-settings: inherit; 
  letter-spacing: inherit; 
  color: inherit; 
  border-radius: 0; 
  background-color: transparent; 
  opacity: 1; 
}

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

::file-selector-button {
  margin-inline-end: 4px;
}

::placeholder {
  opacity: 1;
}

@supports (not (-webkit-appearance: -apple-pay-button))  or
  (contain-intrinsic-size: 1px)  {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

textarea {
  resize: vertical;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-date-and-time-value {
  min-height: 1lh; 
  text-align: inherit; 
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

:-moz-ui-invalid {
  box-shadow: none;
}

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

Mas información

• Reset CSS: Lista de Reset CSS que hay

Las variables CSS permiten guardar un valor y usarlo en muchos sitios en vez de repetir el mismo número o color.

• Las variables de CSS se crean así:

:root {
    --color-principal: #1979E6;
}

• Desde CSS se usan así.

.boton {
    background-color:var(--color-principal)
}

• Se puede definir un valor por defecto como segundo parámetro

.boton {
    background-color:var(--color-principal,#1979E6)
}

• Desde JavaScript se modifican así:

let root = document.documentElement;
root.style.setProperty('--color-principal', "#FF0000");

• Desde JavaScript se leen así:

let root = document.documentElement;
let colorPrincipal=getComputedStyle(root).getPropertyValue("--color-principal");