2

En este código me da este resultado con etiqueta <p>:

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

#div1 {
  position: relative;
  width: 100%;
  height: 10vw;
  background-color: red
}

#div2 {
  position: relative;
  width: 100%;
  background-color: blue;
}

#div2 p {
  padding: 2%;
  background-color: aqua
}
<div id="div1">
</div>
<div id="div2">
  <p>holaaaaaa</p>
</div>

Ahora mire esto en este código me da otro resultado con etiqueta <a> (se sale de su contenedor, el resultado que espero es que no se salga de su contenedor):

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

#div1 {
  position: relative;
  width: 100%;
  height: 10vw;
  background-color: red
}

#div2 {
  position: relative;
  width: 100%;
  background-color: blue;
}

#div2 a {
  padding: 2%;
  background-color: aqua
}
<div id="div1">
</div>
<div id="div2">
  <a>holaaaaaa</a>
</div>

0

2 respuestas 2

6

La diferencia está en el tipo de etiqueta: p es un elemento de bloque (block-level), mientras que a es un elemento en línea (inline).

Los elementos en bloque se visualizan como bloques (ocupando todo el espacio de su elemento padre/contenedor). Se muestran con un salto de línea antes y después del elemento y se puede definir sus dimensiones aplicadas al bloque (alto, ancho, margen y padding).

Los elementos en línea no forman esos bloques de contenido, su contenido se distribuye en líneas y no van precedidos o seguidos por salto de línea. Y a la hora de definir sus dimensiones, no funcionan como los elementos en bloque: el ancho y alto no se aplican, y el margen y padding sólo se aplica horizontalmente y no verticalmente (el problema que estás viendo), o mejor dicho, sólo el horizontal tendrá efecto sobre los elementos que lo rodean.

Puedes hacer que un elemento en línea se comporte en cierto modo como un elemento de bloque cambiando el valor de su display a block (se comportará completamente como un elemento de bloque) o inline-block (se seguirá mostrando en línea, pero se comportará como un bloque permitiendo definir todas sus dimensiones).

Por ejemplo, en tu código se le puede añadir inline-block al a:

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

#div1 {
  position: relative;
  width: 100%;
  height: 10vw;
  background-color: red
}

#div2 {
  position: relative;
  width: 100%;
  background-color: blue;
}

#div2 a {
  padding: 2%;
  background-color: aqua;
  display: inline-block;
}
<div id="div1">
</div>
<div id="div2">
  <a>holaaaaaa</a>
</div>


Referencia:

1
2

Una de las diferencias que yo particularmente encuentro al usarlas es:

etiqueta p => Ocupa el ancho completo del navegador sin importar la cantidad de texto, es decir llega de extremo a extremo

etiqueta a => ocupa solo el ancho del texto que tu le asignas que sirva como ancla, para un recurso en específico

Obvio lo anteruor en función de que no le aigne anchos personalizados, si no los que trae por defecto

Por los mismos detalles que ya te liste cuando escribas contenido justo fuera de la etiqueta p, esta misma lo empujara al siguiente renglón; en cambio la etiqueta a lo va a colocar justo a lado de ella

Saludos

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.