it-roy-ru.com

Можем ли мы определить min-margin и max-margin, max-padding и min-padding в css?

Можем ли мы определить min-margin и max-margin, max-padding и min-padding в CSS?

29
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>

21
dippas

Я столкнулся с той же проблемой сегодня. Видимо, решение так же просто, как с помощью:

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

Обратите внимание, что вам нужно немного уменьшить требуемый% age, чтобы учесть фиксированные пиксели.

7
vigilante_stark

margin и padding не имеют префиксов min или max. Иногда вы можете попытаться указать поля и отступы в процентах, чтобы сделать их переменными относительно размера экрана.

Кроме того, вы можете также использовать min-width, max-width, min-height и max-height для выполнения подобных вещей.

Надеюсь, поможет.

3
Amaan Iqbal

К сожалению, вы не можете . Я пытался передать функцию max в padding, чтобы попробовать эту функцию, но я получил ошибку разбора в моем css. Ниже я попробовал:

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

Затем я попытался разделить операции на переменные, и это тоже не сработало

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

То, что в итоге сработало, просто вложило то, что я хотел, в div с классом «center» и используя max width и width, вот так 

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

К сожалению, это, кажется, лучший способ имитировать "max-padding" и "min-padding". Я полагаю, что техника была бы похожа на «минимальную маржу» и «максимальную маржу». Надеюсь, это будет добавлено в какой-то момент!

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

Используйте приведенный выше код в качестве примера того, как установить min-margin и padding 

1
suraj kumar

Я думаю, что я только что столкнулся с подобной проблемой, где я пытался центрировать поле для входа (например, поле для входа в Gmail). При изменении размера окна центральное окно будет выходить за пределы окна браузера (вверху), как только окно браузера станет меньше, чем окно. Из-за этого в небольшом окне даже при прокрутке верхний контент терялся.

Я смог исправить это, заменив метод центрирования, который я использовал, на метод «margin: auto» для центрирования ящика в его контейнере. Это предотвращает переполнение коробки в моем случае, сохраняя весь контент доступным. (минимальная маржа равна 0).

Удачи !

edit: margin: auto работает только для вертикального центрирования чего-либо, если родительский элемент имеет свое свойство display, установленное на «flex».

1
Kasper Gyselinck

Я думаю, что ваша проблема будет решена с помощью:
1 min-width:
2 max-width:

0
Manu Padmanabhan