Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Display

38/55
Recursos

Aportes 139

Preguntas 27

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Imagen de apoyo sobre los diferentes tipos de Display:
.

Mi resumen:
En un elemento con display:inline no puedo usar margin ni padding arriba ni abajo, solo derecha e izquierda. Tampoco se puede aplicar width o height.

En un elemento con display:block el contenido del elemento toma el 100% del width, se puede usar margin y padding por todos los lados.

En un elemento con display:inline-block, se puede usar margin y padding por todos lados, así como darle width y height, y el contenido es del mismo tamaño que el elemento.

Etiquetas como p y div vienen por Default con un display:block
Etiquetas como span viene por Default con un display:inline

Los elementos inline sólo ocupan el espacio necesario para mostrar sus contenidos.

Elementos inline:
<a> <span> <img> <b> <i> <small> <cite> <code> <em> <strong> <br> <button> <input> <label> <select> <textarea>

Mientras los elementos block ocupa todo el espacio disponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio.

Elementos block:
<div> <article> <section> <header> <footer> <aside> <table> <p> <video> <ul> <ol> <h1> <h2> <h3> <h4> <h5> <h6>

Los elementos inline-block conservan las propiedades mas importantes de los elementos inline y block.

Les recomiendo la extención Pesticide, sirve para ver qué tanto espacio está ocupando cada etiqueta en tu página. 100% recomendada.
Peticide Extencion

En esta clase vimos los 3 tipos de display Base.
Los cuales fueron:

Block: Estos toman el 100% del width, por lo que un elemento no puede posicionarse a un lado de el.
Se le puede poner el width deseado, height deseado, añadir margin, padding sin problema. Pero recordando que ocupara este elemento todo el largo de una Fila por asi decirlo.

Inline: Estos elementos solo ocuparan el ancho dependiento de su contenido. Por lo tanto estos elementos si permiten que si un elemento cabe a lado suyo, se posicione este ahi.
Las *desventajas es que no se les puede modificar el width, height, ni colocar margin u padding tanto top, como bottom.

inline-block: Este tiene la combinación de los 2 anteriores. Haciéndolo un mejor candidato para usarlo.
Permite modificar su width, height, añadirle margin, padding sin problemas y lo mejor es que mientras que haya espacio a un lado suyo, este permitirá posicionar mas elementos ahi.

Ejemplo
Puedes verlo Online Repositorio

Codigo HMTL

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width= device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>iJCode - Display</title>
  </head>
  <body>
    <h2 class="title">
      Elementos "< p >" con Display Block: Ocupa todo el Width del Viewport
    </h2>
    <div class="block">
      <p>Soy un Parrafo con display:block</p>
    </div>
    <div class="block">
      <p>Soy un Parrafo con display:block</p>
    </div>

    <h2 class="title">Elementos " < p > " con display: inline</h2>
    <div class="inline">
      <p>Soy un parrafo pero con display: inline</p>
      <p>Soy un segundo parrafo pero con display: inline</p>
    </div>

    <h2 class="title">Elements inline-block</h2>
    <nav>
      <ul>
        <li>Menu</li>
        <li>Cursos</li>
        <li>Tutoriales</li>
        <li>Tienda</li>
        <li>Contacto</li>
      </ul>
    </nav>
  </body>
</html>

Codigo CSS

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

html {
  font-size: 62.5%;
}

.title {
  width: 100%;
  text-align: center;
  margin: 1rem auto;
  font-size: 2rem;
  color: #322f3d;
}

.block {
  height: 60px;
  background-color: #87556f;
  width: 350px;
  margin-bottom: 2rem;
}

.block > p {
  font-size: 1.6rem;
  background-color: #1a1a2e;
  color: white;
  padding: 1rem 1rem;
  border: 2px solid #be5683;
  padding: 0.5rem 1rem;
  display: block;
}

.inline {
  height: 60px;
  background-color: #87556f;
}

.inline p {
  font-size: 1.6rem;
  color: white;
  border: 2px solid #be5683;
  background-color: #1a1a2e;
  display: inline;
  padding: 0.5rem 1rem;
  margin-right: 2rem;
  width: 1000px;
  height: 700px;
  margin-top: 50px;
  margin-bottom: 50px;
}

nav {
  background-color: #221f3b;
  height: 50px;
}

ul {
  margin: 0 auto;
  text-align: center;
  height: inherit;
}

ul > li {
  display: inline-block;
  font-size: 1.6rem;
  background-color: #6f4a8e;
  color: #ffe4e4;
  padding: 1rem 2rem;
  margin: 6px auto;
}



Reforcé esta clase con este link que les comparto:

En VSCode, para duplicar una línea no es necesario la combinación de teclas Ctrl+C y luego Ctrl+V. Simplemente nos colocamos en la línea a duplicar y presionamos Shift+alt+flecha arriba o abajo dependiendo donde queremos que aparezca la nueva línea

Chicos otro display interesante es el

display:none

Nos permite ocultar elementos de nuestro flujo

Y además de estos existen muchos otros tipos de display, de los cuales hay dos muy interesantes, que son el display: flex; y el display: grid; Son práctiacamente lo mejor que le ha podido pasar a CSS porque hace que el posicionamiento de cajas sea extremadamente fácil

Este es mi proyecto de la clase anterior. Les dejo el repo por si quieren ver o mejorar el codigo
https://github.com/CarlosMazzaroli/platzi-html_y_css_definitivo-RETO-Position
![](

Recordar que la etiqueta padding, tiene 4 formas en la que podemos definirla:


  1. En pixeles: Arriba 10, derecha 20, abajo 30 y izquierda 40
padding: <top> <right> <bottom> <left>;
padding: 10px 20px 30px 40px; 
  1. En pixeles: Arriba 10, derecha e izquierda 30 y 10 abajo
padding: <top> <right && left> <bottom>
padding: 10px 30px 10px;
  1. En pixeles 10 arriba y abajo y 20 derecha e izquierda
padding: <top && bottom> <right && left>
padding: 10px 20px;
  1. En pixeles: 10 en todos lados.
padding: <top && bottom right && left>
padding: 10px;

Nunca pares de aprender!
.

Aporte :

/ * Valores <display-outside> * /

display: block:;
display: inline;
display: run-in;

/ * Valores <display-inside> * /
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/ * Valores <display-outside> más valores <display-inside> * /
display: block flow;
display: inline table;
display: flex run-in;

/ * Valores <display-listitem> * /
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/ * Valores <display-internal> * /
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/ * Valores <display-box> * /
display: contents;
display: none;

/ * Valores <display-legacy> * /
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/ * Valores globales * /
display: heredar;
display: initial;
display: unset;

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

html {
    font-size:62.5%;
}

.main-container{
    margin:auto;
    height:400px;
    width: 700px;
    border-radius: 10px;
    background-color: brown;
    position:relative;
    top:100px;
}

.main-container img{
    width:60%;
    height:60%;
    position:relative;
    bottom:100px;
    left:125px;
}

.main-container__contenedor img{
    height:300px;
    width: 300px;
    position:relative;
    bottom: 140px;
    left:200px;

}

Que les parece? 😀😀😀

display: none;

<!-- El elemento se elimina por completo, sin dejar un espacio vacío -->
display: inline;

<!-- Se comporta como texto simple y se inserta en un bloque de texto -->
<!-- Cualquier width o height aplicado no tendrá ningún efecto -->
<!-- Se pueden aplicar las propiedades padding y margin en left / right; top / bottom se anulan -->
display: block;

<!-- Genera un salto de línea, así sea poco o mucho contenido -->
<!-- Comienza en una nueva línea y ocupa todo el ancho -->
<!-- Tendrán efecto las propiedades width / height y margin / padding -->
display: inline-block;

<!-- El elemento comparte las propiedades, tanto de un elemento inline, como de un elemento de block -->

Mi Aporte 😉

El profesor lo hizo solo para fines didácticos pero se le olvido acotar que no es muy bueno utilizar margin a los costados de un elemento cuando este es hijo directo del body o del main main ya que esto siempre genera problemas con scroll horizontal

Me fue mal con el ejercicio,
pero eso no se queda así…

Para que un elemento con display block no se extienda al 100% del width se puede hacer:

div {
  width: fit-content;
}

Es muy útil si queremos centrar un contenedor con margin auto y que este solo tenga el ancho de su contenido

En esta pagina web: htmlreference .io pueden conseguir el tipo de display de cada una de las etiquetas de HTML, con la finalidad de poder manipularlas adecuadamente.

A los elementos inline no se les puede agregar ni margin ni padding arriba y abajo. Tampoco se les puede manipular el width ni el height.

Notas de la clase

Display block
Los elementos con esta propiedad se renderizan con un 100% de la propiedad width ocupando todo l espacio disponible en la pantalla haciendo que los demás elementos de posicionen debajo. Se les puede agregar padding y margin en en los 4 lados. Ejemplo los elementos div y p

Display inline
Los elementos con esta propiedad permiten que se posicione otro elemento a lado. La propiedad width de estos elementos se define por el tamaño de su contenido. No se e puede agregar margin ni padding en la parte de arriba ni de abajo, solo e izquierda y derecha. Tampoco se puede definir las propiedades height ni width. Ejemplo los elemento span

Display inline-block
Fusiona lo mejor de display block e inline. La propiedad width se establece por el tamaño del contenido. Si hay espacio permite que otro elemento se posicione a lado. Se les puede definir las propiedades height y width. Así como también se les puede agregar margin y padding en los 2 lados.

Como hace el profe para dividir los paneles en el inspector del navegador. Veo que tiene dividido en el apartado de “elements”, en la parte inferior tiene el grafico del modelo de caja por un lado y las propiedades por el otro en la misma vista. Alguien sabe?. Gracias

Reto en Desktop.

Y también lo logre hacer responsive.

El sistema de respuestas ayuda mucho. Excelente trabajo a todos en Platzi.
👍🏽👍🏽👨🏽‍💻

Display

En un elemento con display:inline no puedo usar margin ni padding arriba ni abajo, solo derecha e izquierda. Tampoco se puede aplicar width o height.

En un elemento con display:block el contenido del elemento toma el 100% del width, se puede usar margin y padding por todos los lados.

En un elemento con display:inline-block, se puede usar margin y padding por todos lados, así como darle width y height, el contenido es del mismo tamaño que el elemento.

Etiquetas como <p> y <div> vienen por Default con un display:block.

Etiquetas como <span> viene por Default con un display:inline.

Los elementos inline sólo ocupan el espacio necesario para mostrar sus contenidos.
Elementos inline:
<a> <span> <img> <b> <i> <small> <cite> <code> <em> <strong> <br> <button> <input> <label> <select> <textarea>

Los elementos block ocupa todo el espacio disponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio.
Elementos block:
<div> <article> <section> <header> <footer> <aside> <table> <p> <video> <ul> <ol> <h1> <h2> <h3> <h4> <h5> <h6>

Los elementos inline-block conservan las propiedades mas importantes de los elementos inline y block.

Les dejo la página de W3 schools. Se puede profundizar más este tema que creo que es fundamental para comenzar a posicionar nuestros bloques dentro de la página

https://www.w3schools.com/cssref/pr_class_display.asp

Display
El display es la forma en la que se muestran los elementos
Block
Este es el display por defecto y hace que el ancho de nuestros elementos sea el 100% del vw por lo que siempre vemos el siguiente elemento debajo del anterior
Inline
Esto es lo opuesto a block, ocupa el alto solo necesario para que su contenido quepa(no hay margin ni padding vertical), saltará de línea cuando el siguiente elemento ya no quepa en la actual
Inline block
Esta es la combinación de inline y block, los elementos solo ocuparan el ancho necesario (o el que indiquemos)(como inline), pero puede tener contenido en vertical (como block)

justo le paso lo que a mi con el ejercicio anterior le movía al CSS pero no cambiaba nada, aunque yo tarde como 10 mins en darme cuenta de que no puse el link :c

La etiqueta span sirve para agregar texto sin ocupar mas espacio que el texto.

He hecho mi mejor esfuerzo, me encantaría estar al nivel de UDs. Pero debo ser honesto y me falta muchísimo

Reto de la clase anterior sencillo pero de algo que me gusta mucho es los Sneakers Nike

En esta clase aprendí que el inline-block es de lo más útil. Creo que lo usaré mucho.

a los elemento inline no se les puede gregar ni margin ni paddin en la parte de arriba y abajo como

elementos inline no se puede agregar ni margin. ni padding top ni bottom, ni width ni height.

Resumen ejecutivo:

-Display block: Una etiqueta ocupa el 100% del width.

-Display inline: Las etiquetas se ubican una al lado de la otra si hay espacio suficiente. No podemos agregar un margin a todos los elementos. No podemos modificar widht y height.

-Display inline-block: Sí permite añadir un margin a todos los elementos. Sí podemos modificar widht y height.

38.-Display

block-element: por default el párrafo y el div vienen con display: block, esto quiere decir que va a usar el 100% del espacio que tenga delante sin importar si el contenido tiene o no espacio. Aún así sea solo una letra.

Hay etiquetas como span (que puede ser comodín de p) que no tienen este display: block entonces las junta en una sola línea. A esto se le conoce como display: inline.

NOTA: A los elementos inline no se les puede agregar ni margin ni padding en la parte de arriba y en la de abajo, y tampoco se puede manipular el width y el height de los elementos.

La etiqueta de ul por defecto también es block por lo que la podemos modificar usando inline-block: que es como una fusión de lo mejor de los dos anteriores, a diferencia de inline, este si puede modificar los valores que el otro no podía

Buenas tardes, estoy dentro de un grupo de discord donde invitamos a los estudiantes de este curso a ayudarnos entre nosotros compartiendo soluciones y de esta manera poder tener alguien para consultarle en tiempo real alguna duda https://discord.gg/hCuPq9QN

👍 Voy dejando mi resumen:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Clase Display/blocklnline </title>
<link rel=“stylesheet” href=“style.css”>
</head>
<br><!-- USANDO DISPLAY BLOCK -->
<div class=“block-element”>
Esta es una etiqueta div
</div>
<p class=“block-element”>
Esta es una etiqueta parrafo
</p>
<div>
<p class=“parrafo”>soy texto</p>
<p class=“parrafo”>soy texto</p>
<p class=“parrafo”>soy texto</p>
<p class=“parrafo”>soy texto</p>
</div>
<!-- USANDO DISPLAY BLOCKINLINE -->
<div class=“block-element”>
<p class=“parrafo”>soy texto</p>
<p class=“parrafo”>soy texto</p>
<p class=“parrafo”>soy texto</p>
<p class=“parrafo”>soy texto</p>
</div>
<span>
Soy una etiqueta span
</span>
<span>
Soy una etiqueta span
</span>

<!--    usando display /inline/block-->
<ul class="nav">
    <ol>
        <li>
            Home
        </li>
        <li>
            Cursos
        </li>         
        <li>
            Instructores
        </li>
        <li>
            Blog
        </li>
    </ol>
</ul>
<button><a href="https://www.google.com/"   class="bt-dos">Google</button></a>
<center><button><a href="https://outlook.live.com/mail/0/inbox"   class="bt-tres">Outlook</button></a></center>

</body>
</html>

body {
font-family:cursive;
/* tipo de letra*/
font-weight: bold;
/Texto en negrita /
}
.div {
font-family: ‘Lucida Sans’, ‘Lucida Sans Regular’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Geneva, Verdana, sans-serif;
}
.block-element {
background-color: aquamarine;
/
color de fondo /
margin: 10px;
/
marge del texto /
padding: 20px;
/
/
font-family: Verdana, Geneva, Tahoma, sans-serif;
/
tipo de letra
/
font-weight: bold;
/*Texto en negrita */
border-bottom: 20% ;
}

.nav {
background-color: blueviolet;
color: yellow;
padding: 20px;
list-style: none;
/* ningun estilo de vista*/
text-align: center;
/alinea el texto/
font-family: Verdana, Geneva, Tahoma, sans-serif;
/* tipo de letra*/
font-weight: bold;
/Texto en negrita /
border-radius: 40%;
/
cambia el tamaño del borde
/
}

.nav li { /formato de display/inline-block /
display: inline-block;
/
Cambia de vertical a horizontal
/
font-size: 20px;
/* aumenta el tamaño de la latra*/
font-weight: bold;
/Texto en negrita /
margin: 10px 0;
padding-left: 10px;
/
espacio letras
/
padding-right: 20px;
/* espacio de alto*/

}

.bt-uno ::before {
background-color: blue;
border-radius: 20%;
padding: 5rem 0.1rem;
text-align: center

}

.bt-dos :hover {
background-color: violet;

}

Ojo, toda la clase y en los comentarios se la pasan mensionando que con el Display: inline; no se puede usar padding ni margin arriba o abajo, pero padding si que se puede tanto arriba como abajo, solo margin no

Duplicar líneas sin tener que copiar en visual studio code:
shortcut visual studio code para duplicar codigo sin la necesitar de copiarlo:
Seleccionas la linea clicleandola sin necesidad de remarcarla y usas esta combinación e teclas
shift + Alt + flecha hacia abajo o arriba

🖥️ Display es la propiedad que nos permite controlar estructuras.

display:flex;
justify-content: space-beetwen;

platzi

los clásicos div vienen con un display:block y los span con display: inline

Perfecto

Genial clase, me encantó!

Asi como lo describe diego aplicar display inline block a una lista nos permite realizar una barra de navegación de forma muy fácil

Buena clase!

RESUMEN CLASE 38:
DISPLAY-INLINE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Inline</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="block-element">Esta es una etiqueta div</div>
    <p class="block-element">Esta es una etiqueta de parrafo</p>
    <div class="block-element">
        <p class="parrafo">Soy texto</p>
        <p class="parrafo">Soy texto</p>
        <p class="parrafo">Soy texto</p>
    </div>
    <span>Soy una etiqueta span</span>
    <span>Soy una etiqueta span</span>
    <ul class="nav">
        <li>Home</li>
        <li>Cursos</li>
        <li>Instructores</li>
        <li>Blog</li>
    </ul>
</body>
</html>

CSS

.block-element {
    background-color: green;
    margin: 10px;
    padding: 20px;
}

.nav {
    background-color: peachpuff;
    padding: 20px;
    list-style: none;
    text-align: center;
}

.nav li {
    display: inline-block;
    font-size: 20px;
    margin: 10px 0;
    padding-left: 20px;
    padding-right: 20px;
}

Este es un tema un poco confuso, por lo que dejo un poco de documentación para tener a mano

No es mucho, pero es trabajo honesto

Información resumida de esta clase
#EstudiantesDePlatzi

  • El display block quiere decir que se va a utilizar el 100% de espacio que se tenga adelante sin importar el contenido

  • Display line permite usar el espacio que se encuentra adelante en varias etiquetas, en este display line no puedo usar la parte del margin de arriba o abajo, tampoco podemos usar aquí el width o heigth

  • Inline block permite utilizar el espacio de adelante para más etiquetas y agregar margin y padding, este inline block solamente toma el espacio de su contenido

Aprendiendo todos los dias…

Dejo por aquí esta página que sirve para ver, entre otras cosas, el tipo de display de los elementos HTML. La recomienda la profe Steffy en el curso de Front

Mi resupen de la clase: Puede verse el codigo ejecutándose desde aquí

HTML

<body>
	<div class="block-element">Soy el contenido del primer div</div>
	<p class="block-element">Soy una etiqueta de parrafo</p>
	<!--
Los elementos div y p vienen predeterminados como un elemento de bloque y se muestra al 100% del ancho de la página sin importar el contenido
-->
	<div class="block-element">
		<p class="parrafo">Parrafito 1</p>
		<p class="parrafo">Otro parrrafito</p>
		<p class="parrafo">Un último parrafito</p>
	</div>
	<span>Estoy dentro de una etiqueta span.</span>
	<span>Luego esta otra :P</span>
	<!--
La etiqueta span viene predeterminada con la propiedad display en inline, lo que quiere decir que solo ocupará espacio como si fuera texto y si existe espacio para más contenido se pueda rellenar con dicho contenido siempre y cuando no sea una etiqueta que su propiedad display no tenga un valor de block.

Es importante destacar que con elementos que tengan la declaración display:inline no se puede asignar un margin o padding en la parte superior o inferior ni se puede utilizar width o height por su naturaleza lineal.
-->
	<ul class="nav">
		<li>Home</li>
		<li>Cursos</li>
		<li>Instructores</li>
		<li>Blog</li>
		<!--
Los elementos en la lista son convertidos en una lista horizontal por medio de display:inline-block. Esto permite realizar cambios iguales a los de un bloque pero con un ancho equivalente a su contenido, el tamaño que ocupan es el de su porpio contenido. El único inconveniete es que si una caja con esta propiedad ocupa más del espacio restante en la línea, la caja hará un salto de línea y podría verse contenido de en bloque
-->
	</ul>
</body>

CSS

.block-element {
	background-color: green;
	margin: 10px;
	padding: 20px;
}

.nav {
	background-color: peachpuff;
	padding: 20px;
	list-style: none;
	text-align: center;
}

.nav li {
	display: inline-block;
	font-size: 20px;
	margin: 10px 0;
	padding-left: 20px;
	padding-right: 20px;
}

Explicación de display: block, inline y inline-block

Resumen:


Traducción 😅

inline:

El elemento no comienza en una nueva línea y solo ocupa el ancho que requiere. No puede establecer el ancho o el alto.

inline-block

Tiene el mismo formato que el elemento en línea, donde no comienza en una nueva línea. PERO, puede establecer valores de ancho y alto.

block

El elemento comenzará en una nueva línea y ocupará todo el ancho disponible. Y puede establecer valores de ancho y alto


me siento feliz, reto completado

Hice los diferentes displays. Se los comparto, por si a alguien le sirve de apoyo 😄

💪💪💪

Ya saben inline-block es igual a Hanna Monthana, tiene lo mejor de dos mundos.

Amigos mi aporte es la construcción de probablemente los dos mejores aportes que vi.

Mi resumen: Gonzalo Vidal
En un elemento con display:inline no puedo usar margin ni padding arriba ni abajo, solo derecha e izquierda.
Tampoco se puede aplicar width o height.
En un elemento con display:block el contenido del elemento toma el 100% del width,
se puede usar margin y padding por todos los lados.
En un elemento con display:inline-block, se puede usar margin y padding por todos lados,
así como darle width y height, y el contenido es del mismo tamaño que el elemento.

Elementos inline: Carlos Rodela

<a> <span> <img> <b> <i> <small> <cite> <code> 
<em> <strong> <br> <button> <input> <label> <select> <textarea>

Elementos block: Carlos Rodela
<div> <article> <section> <header> <footer> <aside>
<table> <p> <video> <ul> <ol> <h1> <h2> <h3> <h4> <h5> <h6>

<code> 

Display

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

Formally, the display property sets an element’s inner and outer display types. The outer type sets an element’s participation in flow layout; the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example, the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification. See the table at the end of this document for all of the individual specifications.

Table of differences between inline, block, inline-block

Outsite

block

The element generates a block element box, generating line breaks both before and after the element when in the normal flow.

display: block;

inline

The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space

display: inline;

Inside

flow-root

The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.

display: flow-root;

table

These elements behave like HTML <table> elements. It defines a block-level box.

display: table;

flex

The element behaves like a block element and lays out its content according to the flexbox model.

display: flex;

grid

The element behaves like a block element and lays out its content according to the grid model.

display: grid;

Legacy

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). It is equivalent to inline flow-root.

display: inline-block;
or
display: inline flow-root;

inline-table

The inline-table value does not have a direct mapping in HTML. It behaves like an HTML <table> element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context. It is equivalent to inline table.

display: inline-table;
or
display: inline table;

inline-flex

The element behaves like an inline element and lays out its content according to the flexbox model. It is equivalent to inline flex.

display: inline-flex;
or
display: inline flex;

inline-grid

The element behaves like an inline element and lays out its content according to the grid model. It is equivalent to inline grid.

display: inline-grid;
or
display: inline grid;

Box

none

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

display: none;

https://developer.mozilla.org/en-US/docs/Web/CSS/display

dclases

Recomiendo la extensión Snippet Generator, googleen como usarla, básicamente sirve para hacer pequeñas partes de código repetitivo, configurarlo les tomará 30 segundos por snippet una vez sepan usarlo y les ahorrará una cantidad absurda de tiempo acumulado.

Existe un fenomeno llamado margin collapsing, este consiste en “unificar” los margin de elementos cercanos.
Los margin NO se suman.
.

  1. Si ambos margin son positivos pero diferentes se toma el de mayor valor y esa será la distancia entre ambos elementos (5px y 10px = 10px).

  2. Si ambos margin son iguales (positivo o negativo) entonces esa será la distancia entre ambos elementos (10px y 10px = 10px ó -50px y -50px = -50px).

  3. Si un margin es positivo y otro negativo este se resta del positivo y el resultado será el margin entre los dos (-5px y 10px = 5px).

  4. Si ambos margin son negativos y diferentes entonces el menor se tomará como la distancia entre ambos (-30px y -50px = -50px)

Todo lo anterior solo aplica para los margin-top y margin-bottom

Aquí pueden leer más acerca del margin collapsing.

Diferencias entre:

  • display: block;
  • display: inline
    .
    Display-block
    Hace que el contenido ocupe el 100% de la pantalla lo que obliga al elemento siguiente mantenerse debajo una de la otra.
    .
    Display-inline
    Este lo que hace es que si el contenido del elemento es muy pequeño esto hace que se coloque un elemento al lado de otro, pero la desventaja es que no se le pueden aplicar ni margin-top ni margin-bottom.

gracias

.block-element {
    background-color: green;
    margin: 10px;
    padding: 20px;
}

/* display: block es cuando un elemento ocupa todo un bloque en window */

/* display: inline es uando el elemento solo ocupa el espacio de la linea de acuerdo al tamano de su contenido. no permite agregar margin ni padding ni width ni heigth*/

/* display: inline-block es una combinacion de inline y block, el elemento ocupa todo el bloque y adicional si permite modificar el margin, paddign, width y heigth. y si hay espacio permite que otros hermanos se le pongan al lado*/

.nav {
    background-color:  peachpuff;
    padding: 20px;
    list-style: none;
    text-align: center; /* alinea el texto de forma central */
}
.nav li {
    display: inline-block;
    font-size: 20px;
    margin: 10px 0;
    padding-left: 20px;
    padding-right: 20px;
}

Para el apunte

block: ocupa el 100% del width y no permite tner mas elementos adelante.
inline: ocupa solo el espacio del contenido y permite colocar mas elementos delante de el si hay espacio. No puedo agregar margenes-
inline-block: me permite agregar mas elementos delante si hay mas espacio y agregar margenes arriba y abajo.

Resumen del capitulo en Notion
https://acortar.link/3hhau

La propiedad display: inline-block hace que los elementos únicamente ocupen el espacio del contenido permitiendo a otros elementos ser colocados frente a ellos siempre y cuando se tenga el espacio disponible, además permiten hacer uso del padding-top, padding-bottom, margin-top, margin-bottom, width y height.

Los elementos con display:inline NO pueden utilizar el margin-top, margin-bottom y padding-top, padding-bottom así como el atributo width ya que NO los reconocerá. Elementos como la etiqueta <span> tienen esa propiedad por defecto

Me rajé con el display inline e inline-block en el quiz.
Qué dolor!

No es por corregirle la “semántica verbal” al profe, pero lo que dijo en el minuto 8:31 está muy mal. Mala práctica. No se debe decir.

Display: inline-Block (Dafault en listas ul, li)

Display: Block (Default en Div y P)

Prof. Degranda, excelente explicación.

super buena la explicación

display: inline

Vaya! No sabía que podía usar inline-block para eso, yo siempre usaba flex y alguna de las opciones de justify-content, ahora lo veo más fácil.

¿Cómo se comporten imagenes o archivos en general en Platzi? Por favor.

Muy buena la clase 😃