web-dev-qa-db-ja.com

cssで最小マージンと最大マージン、最大パディングと最小パディングを定義できますか？

CSSでmin-marginおよびmax-margin、max-paddingおよびmin-paddingを定義できますか？

csscss3marginpadding
39
omkar

いいえ、できません。

margin および padding プロパティにはmin/maxプレフィックスがありません

おおよその方法は、相対単位（vh/vw）を使用することですが、それでもmin/maxは使用しません

そして、@ vigilante_starkが 答え で指摘したように、CSS calc()関数は次のような別の回避策になる可能性があります。

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

今日も同じ問題に直面しました。どうやら、ソリューションは次のように簡単です：

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

固定ピクセルを考慮して、必要な％ageを少し減らす必要があることに注意してください。

7
vigilante_stark

残念ながらできません。
maxのCSS padding関数を使用してこの機能を試しましたが、cssで解析エラーが発生しました。以下は私が試したものです：

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

その後、操作を変数に分割しようとしましたが、それも機能しませんでした

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

最終的に機能したのは、クラス「中央」でdivに埋めたいものをネストし、最大幅と幅を使用することでした

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

残念ながら、これは「最大パディング」と「最小パディング」を模倣する最良の方法のようです。 「最小マージン」と「最大マージン」のテクニックは似ていると思います。いつかこれが追加されることを願っています！

3
Kimeiga

marginおよびpaddingには、最小または最大プレフィックスがありません。画面サイズに関してマージンとパディングを可変にするために、パーセンテージでマージンとパディングを指定することができます。

さらに、同様のことを行うために、min-width、max-width、min-height、max-heightを使用することもできます。

それが役に立てば幸い。

3
Amaan Iqbal

ログインボックス（Gmailログインボックスなど）を中央に配置しようとしていたのと同じような問題が発生したと思います。ウィンドウのサイズを変更するとき、ブラウザウィンドウがボックスよりも小さくなったらすぐに、中央のボックスがブラウザウィンドウ（上部）からあふれます。このため、小さなウィンドウでは、上にスクロールしても、上部のコンテンツが失われました。

これを修正するには、コンテナ内でボックスをセンタリングする「margin：auto」方法で使用していたセンタリング方法を置き換えました。これにより、私の場合、ボックスがオーバーフローするのを防ぎ、すべてのコンテンツを利用可能にします。 （最小マージンは0のようです）。

幸運を ！

edit：margin：autoは、親要素のdisplayプロパティが "flex"に設定されている場合にのみ、何かを垂直方向に中央揃えするように機能します。

2
Kasper Gyselinck

@mediaクエリを使用して、最大/最小パディング/マージンを設定することもできます（ただし、画面サイズに応じてのみ）。

8pxの最大パディングが必要だとしましょう。次のことができます。

div {
  padding: 1vh 0;
}
@media (max-height: 800px) {
  div {
    padding: 8px 0;
  }
}
1
Berd
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%";

min-marginおよびpaddingの設定方法の例として上記のコードを使用します

0
suraj kumar