overflow

<< position z-index >>

Indica lo que pasa cuando el contenido de un elemento se sale de sus bordes (Lo hemos experimentado antes, pero ahora podemos controlar lo que pasa).

  • visible: El contenido se saldrá de los bordes, pero por encima de estos (se verá la par del contenido que quede fuera del elemento).
  • hidden: El contenido se saldrá pero por debajo del borde y no será visible la parte que se salga.
  • scroll: Se insertan 2 barras de scroll para cuando el contenido sea demasiado grande (desaconsejado porque aparecerán las barras aunque el contenido se ajuste bien).
  • auto: Más aconsejable que la de arriba. Aunque esta opción hace que dependa del navegador, normalmente este añadirá una o las 2 barras de scroll al elemento conforme se necesiten (dependiendo de por donde se salga el contenido).
* {
    padding-top: 10px;
}

p{
    border: 1px solid red;
    width: 150px;
    height: 150px;
    overflow: hidden;
    overflow: visible;
    overflow: scroll;
    overflow: auto;
}

<< position z-index >>