Display:block El contenido del elemento toma el 100% del width, se puede usar margin y padding por todos los lados.
Display:inline No puedo usar margin ni padding arriba ni abajo, solo derecha e izquierda. Tampoco se puede aplicar width o height.
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.
<!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>
{ 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;
}