Mostrar un ancho de div 100% con márgenes

Quiero mostrar un expandible div( width: 100%) con márgenes...

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: 100%;
  height: 300px;
  margin: 10px;
}

<div id="page">
  <div id="margin">
    "some content here"
  </div>
</div>

Expandir fragmento

Nov 10 '12 21:11 Random78952

Puede utilizar calc()la función CSS ( soporte del navegador ).

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

Alternativamente, intente usar relleno en lugar de margen y box-sizing: border-box( soporte del navegador ):

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

Nov 10 '2012 14:11 Vukašin Manojlović

A veces es mejor hacer lo contrario y darle divrelleno al padre:

DEMO EN VIVO

Lo que hice fue cambiar el CSS de #pagea:

#page {
    padding: 3%;
    width: 94%; /* 94% + 3% +3% = 100% */

    /* keep the rest of your css */
    /* ... */
}

Luego borre el marginde#margin

Nota: esto también agrega un 3% a la parte superior e inferior (es decir, un 6% a la altura), lo que lo hace un poco más alto que 300 px, por lo que si necesita exactamente 300 px, puede hacer algo como padding:10px 3%;y cambiar height:280px;para agregar hasta 300 px nuevamente. .

Nov 10 '2012 14:11 Andy

La forma correcta de lograr esto por estándar es:

#margin {
   background: green;
   height: 280px;
   margin: 10px;
   width: auto;
   display: block;
}

Jul 13 '2017 13:07 Tolly