Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Duda] Problema con margin

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Adaptando la página inicial y actividad Usando el float

por SilviaJulianaRocioDiazDiaz
| 105k xp | 188 posts

Buenas! Les comento que mi section de "principales" está pegada al borde de la pantalla web visualmente hablando, a pesar de haberle aplicado "margin" siguiendo las indicaciones del profe. Mi código HTML:

        <section class="principal">
         <h2 class="titulo-principal">Sobre la Barbería Alura</h2>
         <img class="utensilios" src="imagenes/utensilios[1].jpg" alt="Utensilios de un barbero">


            <p> Ubicada en el corazón de la ciudad, la Barbería Alura trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la <strong> Barbería Alura</strong> ya es destaque en la ciudad y conquista nuevos clientes diariamente. </p>

            <p id="mision">  <em>Nuestra misión es:<strong>"Proporcionar autoestima y calidad de vida a nuestros clientes".</strong></em></p>

             <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes. </p>
        </section>

Y el CSS correspondiente:

.titulo-principal{
    text-align: center;
    font-size: 2em;
    /*2em significa dos veces el tamaño de la letra del navegador, que es 15 px*/
    margin: 0 0 1em;
}

.principal p{
    margin: 0 0 1em;

}
2 respuestas
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Silviajulianarociodiazdiaz!

Por lo que veo en tu código, estás aplicando correctamente el margen a los párrafos dentro de la sección "principal", pero no estás aplicando margen a la propia sección. Para solucionar esto, puedes agregar un margen a la clase "principal" en tu archivo CSS. Por ejemplo:

.principal {
  margin: 0 20px; /* Aquí puedes ajustar el valor del margen a tu gusto */
}

De esta manera, deberías poder separar la sección del borde de la pantalla.

Espero que esto te ayude. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por SilviaJulianaRocioDiazDiaz
| 105k xp | 188 posts

Hola! Me he percatado de que el problema es en el Header. Te comparto mi HTML, mi CSS y un pantallazo de cómo se está viendo:

 <header>

                <h1> <img src="imagenes/logo.png"> </h1>
             <nav>
                <ul class="navegacion">
                    <li><a href="HTML 1/index.html"> Home</a></li>
                    <li><a href="productos.html"> Productos</a></li>
                    <li><a href="contacto.html"> Contacto</a></li>
                    </ul>
             </nav>

             </header>

Y el CSS:

header {
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;

}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadComo puedes ver, no hay un margen correcto. Un saludo! Espero tu respuesta, gracias!