Aplicando width/margin en mapa | HTML5 y CSS3 parte 4: Avanzando en CSS

A partir del minuto 6:40, el profesor encapsula el mapa de la pagina que estamos haciendo, para reconfigurarla y centrarla como correspondia antes de sacar el .main{} en el archivo css.

La verdad es que tengo la manía de ir adelantandome aveces cuando el profesor dice que necesitamos hacer, y ya que estoy aprendiendo constantemente me equivoco en mis "soluciones".

Esta vez le agregue el width y el margen directamente a la clase "mapa", quedando de la forma:

en html

<section class="mapa">
                <h3 class="titulo-principal">Nuestra ubicacion</h3>
                <p>Nuestro establecimiento esta ubicado en el corazon de la ciudad</p>

                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449840047712!2d-46.6323319!3d-23.588194799999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses!2scl!4v1659474119631!5m2!1ses!2scl" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>



            </section>

y en css:

.mapa{
    padding: 3em 0;
    width: 940px;
    margin: 0 auto;
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;
}

luego, distinto de mi, el profesor "encapsula" solo el mapa (sin incluir los textos), para agregarle el width y el margin solo al mapa de la siguiente forma en html:

 <section class="mapa">
                <h3 class="titulo-principal">Nuestra ubicacion</h3>
                <p>Nuestro establecimiento esta ubicado en el corazon de la ciudad</p>

                <div class="mapa-contenido">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449840047712!2d-46.6323319!3d-23.588194799999997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses!2scl!4v1659474119631!5m2!1ses!2scl" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

                </div>

            </section>

y en css;

`.mapa{ padding: 3em 0; }

.mapa p{ margin: 0 0 2em; text-align: center; }

.mapa-contenido{ width: 940px; margin: 0 auto; }`

probe de las dos formas, y las dos formas se me ven iguales, ¿que tiene de distinto? y, ¿que problemas podria traer lo que yo hice en vez de hacer lo que hizo el profesor? muchisimas gracias de antemano :D

Hola Diego, ¿cómo estás?

Me alegro de que pruebes otras posibilidades, es una buena manera de entender lo que estamos haciendo y fijar el aprendizaje.

Lo único que hicieron distinto es que el profe creó un div para aplicar las configuraciones solamente al mapa, pues no eran necesarios cambios en toda la section, ya que los textos ya estaban alineados y con espaciado deseado.

Ambas etiquetas div y section se utilizan para dividir la página, cuando usamos section significa que el contenido interno está relacionado con un solo tema y la etiqueta div se utiliza como parte del bloque de la página web y no transmite ningún significado particular.

Por mis pruebas, no usar div no acarreará problemas en este código en específico, pero atención cuando vaya a alterar posteriormente esta parte, para que no te equivoques, ya que no está haciendo exactamente igual al profe. Y ¡ojo!, en otros casos no crear div puede traer problemas con títulos o otras estilizaciones.

Si tienes más dudas, aquí estaremos para apoyarte. :)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios