css-quiz-margin-and-padding-on-inline-elements.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

Considering the following code (HTML and CSS), What would you see in the browser ?

Click here to see the correct answer and explanation 👀

Correct Answer	Explanation
A	The block-direction margin (e.g. top/bottom normally) on inline elements is ignored entirely and the padding on inline elements doesn’t affect the height of the line of text.

Explicación basada en 👉🏼 When do you use inline-block? | CSS Tricks

Code:

HTML:

<p>Ya casi es <span>✨ Navidad 🎄</span></p>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
  font-family: 'Lato', sans-serif;
  padding: 10px;
}

p {
  background: red;
  color: white;
  padding-left: 8px;
}

span {
  background: mediumaquamarine;
  margin: 16px;
  padding: 16px;
}

Spanish version 🚀

Considerando el siguiente código (HTML y CSS), ¿Qué verías en el navegador?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta	Explicación
A	El margin de arriba y abajo de los elementos inline se ignora por completo y el padding en los elementos inline no afecta la altura de la línea de texto.

Explicación basada en 👉🏼 When do you use inline-block? | CSS Tricks

Código completo:

HTML:

<p>Ya casi es <span>✨ Navidad 🎄</span></p>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
  font-family: 'Lato', sans-serif;
  padding: 10px;
}

p {
  background: red;
  color: white;
  padding-left: 8px;
}

span {
  background: mediumaquamarine;
  margin: 16px;
  padding: 16px;
}

WaoooOooOooOo hahahaha pase a saludar

A. Al ser span una etiqueta que por defecto tiene display:inline no respetan anchos, altos ni márgenes verticales 💚