0

Al aplicar el display: inline en el body, todo se ve como si el display fuese block, o sea, uno encima del otro con espacios. Lo que intento con el inline es que se vea uno al lado del otro, pero no resulta. No se si el error sea donde esta colocado el display, que lo puse en el selector body, o ni idea. También uso el display inline-block, pero eso solo resulta en que el tamaño de los contenedores es igual, pero aun siguen estando uno debajo del otro, y lo que quiero es que se coloquen uno al lado del otro sin espacios. Este es mi códgio HTML:

<!DOCTYPE html>
<html lang="es">

<head>
    <title> By Jesús Díaz </title>
    <meta charset="UTF-8">
    <meta name="author" content="Jesus Diaz" />
    <meta name="description" content="Portafolio electronico by Jesus Diaz" />
    <meta name="keywords" content="Portafolio, jesus diaz, curriculum" />
    <link rel="icon" type="image/png" href="Imagenes/html.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../../../Programacion/CSS/normalize.css" />
    <link rel="stylesheet" href="Style/style.css" />

</head>

<body>
    <header class="Header">
        <h1 class="titulo">Encabezado</h1>
    </header>
    <nav class="Nav">
        <h1 class="titulo">Navegación</h1>
    </nav>
    <aside class="Aside">
        <h1 class="titulo">Apartado</h1>
    </aside>
    <section class="Section">
        <h1 class="titulo">Cuerpo principal</h1>
    </section>
    <footer class="Footer">
        <h1 class="titulo">Pie de página</h1>
    </footer>
</body>

</html>

Y este es mi codigo CSS:

* {
    font-family: 'Inconsolata', monospace;
}

.titulo {
    color: #f8f8f8;
}

body {
    display: inline;
}

.Header {
    background-color: #181818;
}

.Nav {
    background-color: #050277;
}

.Aside {
    background-color: #960000;
}

.Section {
    background-color: #181d28;
}

.Footer {
    background-color: #0e2b19;
}
1
  • 1
    No logro entender tu pregunta, pero en esta página que estás compartiendo no tiene ningún sentido aplicar un display al body, de echo creo que no lo tiene nunca a menos que no se desee ocultar el body con un display:none. Lo que buscas hacer creo que es aplicar un display a los elementos al interno del body, simplemente asigna una clase a los elementos interesados y luego aplica ese display a dicha clase. Commented el 21 mar. 2021 a las 9:11

3 respuestas 3

1

En lugar de colocar display: inline; con el selector tipo body, colócalo a las clases que quieres poner en línea.

Aquí puedes ver como funciona el display: https://www.w3schools.com/css/css_display_visibility.asp

Suerte

1
  • Agrega un breve resumen del contenido del enlace en tu respuesta: recuerda que puede que ya no esté accesible más adelante. Lee Cómo responder.
    – padaleiana
    Commented el 21 mar. 2021 a las 19:56
1

Lo que haces al poner inline en el body es que solo el este inline, por defecto todos los elementos están en block, te recomiendo usar un contenedor y aplicar flex o grid. Con flex puedes hacerlo en 2 simples líneas de css, además esto te evita poner todos en modo inline, esto por defecto no tienen nigun espacio entre ellos, pero puedes incluirlo usando gap (muy diferente a margin) Aprende sobre flex

.container {
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
 <div class = "container">
    <header class="Header">
        <h1 class="titulo">Encabezado</h1>
    </header>
    <nav class="Nav">
        <h1 class="titulo">Navegación</h1>
    </nav>
    <aside class="Aside">
        <h1 class="titulo">Apartado</h1>
    </aside>
    <section class="Section">
        <h1 class="titulo">Cuerpo principal</h1>
    </section>
    <footer class="Footer">
        <h1 class="titulo">Pie de página</h1>
    </footer>
 <div>

0

Al poner body{ display: inline; } unicamente se está definiendo el display del elemento body, puesto que cada elemento de HTML trae consigo un tipo de display específico, lo que estás poniendo en body no se hereda al resto de elementos.

Para realizar lo que deseas, debes especificar el tipo de display en cada elemento o clase que lo requieras:

.Header, 
.Nav, 
.Aside, 
.Section, 
.Footer { 
    display: inline; 
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.