propiedades - ¿Podemos definir el margen mínimo y el margen máximo, el relleno máximo y el relleno mínimo en css?

plantillas contact form 7

Question

¿Podemos definir min-margin max-margin , max-padding min-padding en CSS?

Answer 1

Creo que acabo de encontrar un problema similar en el que intentaba centrar un cuadro de inicio de sesión (como el cuadro de inicio de sesión de gmail). Al cambiar el tamaño de la ventana, el cuadro central se desbordaría de la ventana del navegador (arriba) tan pronto como la ventana del navegador se volviera más pequeña que el cuadro. Debido a esto, en una pequeña ventana, incluso al desplazarse hacia arriba, el contenido superior se perdió.

Pude arreglar esto reemplazando el método de centrado que usé por la forma "margen: auto" de centrar la caja en su contenedor. Esto evita que la caja se desborde en mi caso, manteniendo todo el contenido disponible. (El margen mínimo parece ser 0).

Buena suerte !

edit: margin: auto solo funciona para centrar verticalmente algo si el elemento principal tiene su propiedad de visualización configurada en "flex".

Answer 2

Creo que tu problema se resolverá utilizando:
1 min-width:
2 max-width:

Answer 3

Desafortunadamente no puedes. Intenté pasar la función max al relleno para intentar esta funcionalidad, pero obtuve un error de análisis en mi css. A continuación es lo que he intentado:

padding: 5px max(50vw - 350px, 10vw);

Luego traté de separar las operaciones en variables, y eso tampoco funcionó

  --padding: calc(50vw - 350px); 
  --max-padding: max(1vw, var(--padding));
  padding: 5px var(--max-padding);

Lo que eventualmente funcionó fue simplemente anidar lo que quería acolchado en un div con la clase "centrada" y usar el ancho y el ancho máximos como tal

 .centered {
 margin: 0 auto;
 max-width: 700px;
 height: 100%;
 width: 98vw;
}

Desafortunadamente, esta parece ser la mejor manera de imitar un "relleno máximo" y un "relleno mínimo". Me imagino que la técnica sería similar para "margen mínimo" y "margen máximo". Esperemos que esto se agregue en algún momento!

Answer 4

Idealmente, los márgenes en los contenedores CSS deberían colapsarse, por lo que puede definir un contenedor primario que establezca sus márgenes (s) al mínimo que desee, y luego usar los márgenes que desea para el hijo, y el contenido del niño use los márgenes más grandes entre el margen principal y el secundario:

• Si los márgenes secundarios son más pequeños que los márgenes primarios más sus rellenos, los márgenes secundarios no tendrán ningún efecto.

• si los márgenes secundarios son más grandes que los márgenes primarios + sus rellenos, entonces los rellenos primarios deben aumentarse para que se ajusten.

Con frecuencia, esto todavía no funciona como se espera en CSS: actualmente, CSS permite que los márgenes de un hijo se colapsen en los márgenes del padre (extendiéndolos si es necesario), solo si el padre define NO relleno y NO borde y no existe contenido de hermanos intermedio en el padre entre el hijo y el principio del cuadro de contenido del padre; sin embargo, puede haber elementos hermanos flotantes o posicionados , que se ignoran para calcular los márgenes, a menos que usen "claro" para extender también el cuadro de contenido del padre y ajustar su propio contenido verticalmente (solo la altura del contenido del padre) el cuadro se incrementa para la dirección de bloque de arriba a abajo o de abajo a arriba de su cuadro de contenido, o solo el ancho de los padres para la dirección de bloque de izquierda a derecha o de derecha a izquierda; la dirección en línea del cuadro de contenido de los padres no desempeña ningún papel).

Entonces, si el padre define solo 1px de relleno, o solo 1px de borde, esto evitará que el niño colapse su margen en el margen del padre. En cambio, los márgenes secundarios entrarán en vigencia desde el cuadro de contenido del padre (o el cuadro de borde del contenido intermedio de hermanos, si hay alguno). Esto significa que cualquier margen no nulo o relleno no nulo en el padre es tratado por el hijo como si fuera un contenido de hermanos en el mismo padre.

Por lo tanto, esta solución simple debería funcionar: use un padre adicional sin ningún borde o relleno para establecer el margen mínimo para anidar el elemento secundario en él; ¡todavía puede agregar bordes o rellenos al elemento secundario (si es necesario) donde definirá su propio margen secundario (que se contrae en los márgenes de los padres)!

¡Tenga en cuenta que un elemento secundario puede colapsar su (s) margen (s) en varios niveles de padres! Esto significa que puede definir varios mínimos (por ejemplo, para el mínimo entre 3 valores, use dos niveles de padres para contener al niño).

A veces se necesitan 3 o más valores para tener en cuenta: el ancho de la ventana gráfica, el ancho del documento, el ancho del contenedor de la sección, la presencia o ausencia de flotadores externos que roban espacio en el contenedor y el ancho mínimo necesario para el contenido del niño. Todos estos anchos pueden ser variables y pueden depender también del tipo de navegador utilizado (incluidos los ajustes de accesibilidad, como el zoom de texto, o los ajustes de tamaño "Hi-DPI" en los renderizadores, según las capacidades del dispositivo de visualización de destino, o algunas veces porque hay una opción de diseños ajustables por el usuario, como "pieles" personales u otras preferencias del usuario, o el conjunto de fuentes disponibles en el servidor de procesamiento final, lo que significa que los tamaños de fuente exactos son difíciles de predecir de forma segura, para que coincidan los tamaños exactos en " píxeles "para imágenes o bordes; así como los usuarios tienen una gran variedad de tamaños de pantalla o papel si se imprimen y orientaciones; el desplazamiento tampoco está disponible o no es posible compensarlo, y el truncamiento de los contenidos desbordados es a menudo indeseable; los "borrados" excesivos desperdician espacio y hacen que el documento renderizado sea mucho menos accesible).

Necesitamos ahorrar espacio, sin empacar demasiada información y mantener la claridad para los lectores, y la facilidad de navegación: un diseño es un compromiso constante, entre ahorrar espacio y mostrar más información a la vez para evitar desplazamientos o navegación adicionales a otras páginas, y mantener la información empaquetada se muestra fácil de navegar o interactuar con).

Pero el HTML a menudo no es lo suficientemente flexible para todos los objetivos, e incluso si ofrece algunas funciones avanzadas, se vuelve difícil crear o mantener / cambiar los documentos (o las informaciones que contienen), o readaptar el contenido más adelante para otros objetivos o presentaciones. . Mantener las cosas simples evita este problema y si usamos estos simples trucos que no tienen costo y son fáciles de entender, deberíamos usarlos (esto siempre nos ahorrará un tiempo precioso, incluso para los diseñadores web).

Answer 5

Me enfrenté con el mismo problema hoy. Aparentemente la solución es tan simple como usar:

padding: calc(*put fixed pixels here*px + *put your required %age here*%) 

Tenga en cuenta que tiene que disminuir un poco la edad requerida para tener en cuenta los píxeles fijos.

Answer 6

margin y el padding no tienen prefijos mínimos o máximos. A veces, puede intentar especificar el margen y el relleno en términos de porcentaje para que sea variable con respecto al tamaño de la pantalla.

Además, también puedes usar min-width, max-width, min-height y max-height para hacer cosas similares.

Espero eso ayude.

Answer 7

No tu no puedes

margin propiedades de margin y padding no tienen los prefijos min / max

Una forma aproximada sería usar unidades relativas ( vh / vw ), pero todavía no min/max

Y como @vigilante_stark señaló en la respuesta , la función CSS calc() podría ser otra solución, algo como esto:

/* demo */

* {
  box-sizing: border-box
}

section {
  background-color: red;
  width: 50vw;
  height: 50px;
  position: relative;
}

div {
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0
}


/* end of demo */

.min {
  /* demo */
  border: green dashed 4px;
  /*this your min padding-left*/
  padding-left: calc(50vw + 50px);
}

.max {
  /* demo */
  border: blue solid 3px;
  /*this your max padding-left*/
  padding-left: calc(50vw + 200px);
}

<section>
  <div class="min"></div>
  <div class="max"></div>
</section>

Answer 8

var w = window.innerWidth;
var h = window.innerHeight;
if(w < 1116)
    document.getElementById("profile").style.margin = "25px 0px 0px 975px";
else
    document.getElementById("profile").style.margin = "25px 0px 0px 89%";

Use el código anterior como ejemplo de cómo configurar min-margin y el padding