2

¿Alguien me puede ayudar con algo? yo tengo un max-width de 1000px dentro tengo tres cajas de 320px de ancho, yo quiero aplicar un margen de 20 pixeles pero quiero que solo se apliquen solo horizontalmente entre la caja del medio no por fuera para redondear 1000px dejo una imagen para que vean lo que quiero:

introducir la descripción de la imagen aquí

2
  • 1
    Hola, no estoy seguro si lo que necesitas el un padding o margin-left y margin-right. Podrías compartir el código que tienes para que podamos ayudarte mejor? Commented el 2 ene. 2020 a las 5:24
  • Una consulta: Tal como lo propones, tus cajas son de ancho fijo. ¿Cuál es el comportamiento que esperas de ellas cuando tu contenedor sea menor al ancho máximo que propones? Commented el 2 ene. 2020 a las 12:11

2 respuestas 2

1

Tan simple como hacer esto

<style>
  .container {
    max-width: 1000px;
    display: block;
  }
  .box {
    width: 320px;
    height: 320px;
    max-width: 320px;
    display: inline-block;
    margin-left: 5px;
    background: green;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

1
  • si se lo colocas auto responsive quedaría espectacular como algo extra en la respuesta Commented el 2 ene. 2020 a las 5:54
0

Si lo que quieres es dejar un 'margin' y que quede reflejado en tu 'css' lo que debes hacer es darle un 'margin-left' a la segunda y tercera 'caja' con una clase concreta que solo les aplique a ellas. Ejemplo:

 .marginCajas2y3 {margin-left: 20px}

Si tu página es 'responsive' y en algún momento necesitas que esas 'cajas' ocupen el 100% del espacio recuerda que debes resetear ese 'marginCajas2y3'.

En cualquier caso te recomiendo que recurras bien a 'flexbox', bien a un 'framework' tipo 'bootstrap', por ejemplo, para controlar tanto los espacios como el 'responsive' de tu página. Te dejo un enlace que te puede ser de ayuda: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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.