1

Tengo un contendor que he reducido y me gustaría ponerle borde a la parte que he reducido.

Ahora mismo el contenedor tiene el siguiente código:

.container2 {
    max-width: 100%; /*establecemos el ancho máximo del contenido*/
    padding-bottom: 50px;
    padding-left: 20%;
    padding-right: 20%;
}

Cual es el problema que si pongo border me lo hace fuera de los límites que he marcado y yo quiero que el borde lo haga en el padding-botom 50....

¿Cómo puedo hacerlo?

Es decir he creado un contendor que he llenado de texto, pero ese contenedor en vez de empezar en el margen izquiero y derecho por defecto he hecho que se reduzca para que sea más centrado.

Saludos y mil gracias!

1 respuesta 1

1

Eso es por el Box Model de CSS, puedes documentarte aquí: CSS Box Model.

La siguiente imagen muestra el orden en el que se aplican los espacios a la caja. Como se puede ver el padding es un espacio entre el borde y el contenido.

introducir la descripción de la imagen aquí

En tu caso lo que deseas es agregar un borde que estaría en la zona del contenido así que ahí puedes agregar un div que cubra el 100% del área de contenido y ahí aplicar un borde.

.principal {
  height: 400px;
  width: 400px;
  border-style: solid;
  border-color: red;
  border-width: 1px;
}


.container2 {
    max-width: 100%; /*establecemos el ancho máximo del contenido*/
    padding-bottom: 50px;
    padding-left: 20%;
    padding-right: 20%;
    border-style: solid;
    border-style: solid;
    border-color: green;
    border-width: 1px;
    --background-color: blue;
}

.interno{
   width: 100%;
   height: 100%;
   border-style:solid;
   border-width: 1px;
   background-color: yellow;

}
<div class="principal">


  <div class="container2">
      <div class="interno">
        contenido
      </div>
  </div>


</div>

1
  • mil gracias, con el ejemplo lo he visto muchisimo más claro, ya he visto el tema de los 3 contenedores y como aplicarlo. Me has salvado la vida!
    – Montse Mkd
    Commented el 1 nov. 2020 a las 20:19

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.