web-dev-qa-db-fra.com

Peut-on définir min-margin et max-margin, max-padding et min-padding en css?

Pouvons-nous définir min-margin et max-margin, max-padding et min-padding en CSS?

csscss3marginpadding
29
omkar

Non tu ne peux pas.

margin et padding properties n'a pas les préfixes min/max

Une méthode approximative consisterait à utiliser des unités relatives (vh/vw), mais toujours pas min/max

Et comme @vigilante_stark a souligné dans la réponse , la fonction CSS calc() pourrait être une autre solution de contournement, quelque chose comme ceci:

/* 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>

21
dippas

J'ai été confronté au même problème aujourd'hui. Apparemment, la solution est aussi simple que d’utiliser:

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

Notez que vous devez décrémenter légèrement le% d'âge requis pour prendre en compte les pixels fixes.

7
vigilante_stark

margin et padding n'ont pas de préfixes min ou max. Parfois, vous pouvez essayer de spécifier la marge et le remplissage en termes de pourcentage pour le rendre variable en fonction de la taille de l'écran.

De plus, vous pouvez également utiliser min-width, max-width, min-height et max-height pour faire des choses similaires.

J'espère que ça aide.

3
Amaan Iqbal

Malheureusement, vous ne pouvez pas… .. J'ai essayé de passer la fonction max à padding pour essayer cette fonctionnalité, mais j'ai une erreur d'analyse dans mon css. Voici ce que j'ai essayé:

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

J'ai ensuite essayé de séparer les opérations en variables, et cela n'a pas fonctionné non plus.

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

Ce qui a finalement fonctionné, c’est simplement l’imbrication de ce que je voulais dans une div avec une classe "centrée" et une largeur maximale 

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

Malheureusement, cela semble être le meilleur moyen d'imiter un "max-padding" et un "min-padding". J'imagine que la technique serait similaire pour "min-margin" et "max-margin". Espérons que cela sera ajouté à un moment donné!

2
Kimeiga
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%";

Utilisez le code ci-dessus pour illustrer comment définir min-margin et padding 

1
suraj kumar

Je pense que je viens de rencontrer un problème similaire dans lequel j'essayais de centrer une boîte de connexion (comme la boîte de connexion gmail). Lors du redimensionnement de la fenêtre, la zone centrale déborderait de la fenêtre du navigateur (en haut) dès que celle-ci serait devenue plus petite que la zone. De ce fait, dans une petite fenêtre, même lors du défilement vers le haut, le contenu principal a été perdu.

J'ai pu résoudre ce problème en remplaçant la méthode de centrage utilisée par la méthode "margin: auto" pour centrer la boîte dans son conteneur. Cela empêche la boîte de déborder dans mon cas, tout en gardant tout le contenu disponible. (la marge minimale semble être 0).

Bonne chance !

edit: margin: auto ne permet de centrer verticalement quelque chose que si l'élément parent a sa propriété d'affichage définie sur "flex".

1
Kasper Gyselinck

Je pense que votre problème va résoudre en utilisant:
1 min-width:
2 max-width:

0
Manu Padmanabhan