unidad - ¿Utiliza un margen de porcentaje en CSS pero quiere un margen mínimo en píxeles?

unidades de medida en css

Question

He establecido un margin: 0 33% 0 0; Sin embargo, también me gustaría asegurarme de que el margen sea al menos una cierta cantidad de px . Sé que no hay min-margin en CSS, así que me preguntaba si tengo alguna opción aquí.

Answer 1

¿Qué tal esto?

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}

Answer 2

Carl Papworth, en este caso, puedes usar esto:

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}

Answer 3

Coloque un div con un% de width y un min-width estático a la derecha de su elemento.

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">

Answer 4

He jugado con algunas de las soluciones antes mencionadas, pero en una configuración fluida y realmente receptiva, creo que la mejor opción es establecer el relleno adecuado en el respectivo contenedor / envoltura. Ejemplo: Estilo:

 html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}

Ahora juegue con varios anchos de ventana y pruebe diferentes tamaños de letra.

Pruebe también la demostración funcional .

Answer 5

La verdadera solución aquí es utilizar un punto de interrupción de consulta de medios para determinar cuándo el 33% ya no le funciona y debe anularse con el margen mínimo en píxeles.

/*Margin by percentage:*/
div{
margin: 0 33% 0 0;
}
/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
div{
margin: 0 15px 0 0;
}
}

En el código anterior, cambie el max-width a cualquier ancho de pantalla, el margen derecho del 33% ya no le servirá.

Answer 6

Por lo que yo entiendo, puedes colocar un div alrededor de tu elemento, que define un relleno. Un relleno de un elemento externo es como el margen de un elemento interno.

Imagina que quieres al menos un margen de 1px:

<div style="padding:1px">
<div style="margin: 0 33% 0 0;">
interesting content
</div>
</div>

editar: esta es como la respuesta de Imigas, pero creo que es más fácil de entender.

Answer 7

Puede mantener sus artículos en un div "contenedor" y establecer un relleno exacto a "margen mínimo" que le gustaría tener. Puede que no sea exactamente lo que está buscando, pero le da esa sensación de tamaño de margen mínimo.

<div class="container">
<div class="your_div_with_items">
''items''
</div>
</div>

Entonces el CSS:

.container
{
padding: 0 ''min_margin_ammount'' 0 0;
}
.your_div_with_items
{
margin: 0 33% 0 0;
}

Answer 8

puedes intentar esto

.mm:before {
content: "";
display: inline-block;
width: 33%;
min-width: 200px;
}

Answer 9

si está usando span debe hacer de esta manera:

span{
display:block;
margin:auto;
}

demostración de trabajo

si está utilizando div que puede hacer esto:

div{
margin:auto;
}