Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Нет, ты не можешь.

свойства 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>

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

К сожалению, вы не можете.
Я попытался использовать функцию CSS 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" и использовал максимальную ширину и ширину, вот так

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

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

Ответ 5

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

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

Удачи !

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

Ответ 6

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

Ответ 7

Вы также можете использовать запросы @media, чтобы установить максимальный/минимальный отступ/маржу (но только в соответствии с размером экрана):

Допустим, вы хотите максимальный отступ 8px, вы можете сделать следующее

div {
  padding: 1vh 0;
}
@media (max-height: 800px) {
  div {
    padding: 8px 0;
  }
}

Ответ 8

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

Ответ 9

Опоздание на вечеринку, как было сказано выше, к сожалению, такого понятия, как max-margin, не существует. Решение, которое мне помогло, - поместить div над элементом, к которому вы хотите применить максимальный запас.

<body style="width:90vw; height:90vh;">
    <div name="parrentdiv/body" style="width:300px; height:100%; background-color: blue">
        <div name="margin top" style="width:300px; height:50%; min-height:200px; background-color: red"></div>
        <div name="item" style="width:300px; height:180px; background-color: lightgrey">Hello World!</div>
    </div>
</body>

Запустите приведенный выше фрагмент кода на полной странице и измените размер окна, чтобы увидеть, как это работает. У lightgreypart будет маржинальная вершина 50% и минимальная маржинальная вершина 200px. Это поле красного цвета (которое вы можете скрыть с помощью display: none; если хотите). Синяя часть - это то, что осталось от тела.

Я надеюсь, что это поможет людям с той же проблемой в будущем.

Ответ 10

В идеале поля в CSS-контейнерах должны разрушаться, поэтому вы можете определить родительский контейнер, который устанавливает минимальные значения полей, а затем использовать поля, которые вы хотите для дочернего элемента, и содержимое дочернего элемента будет используйте большие поля между родительским и дочерним полями:

  • если дочерние поля меньше, чем родительские поля +its padding (s), то дочерние поля не будут иметь никакого эффекта.

  • если дочернее поле (поля) больше, чем родительское поле (поля) +its заполнение (я), то родительское дополнение (я) должно быть увеличено, чтобы соответствовать.

Это по-прежнему часто работает не так, как задумано в CSS: в настоящее время CSS позволяет марже (-ам) дочернего элемента сворачиваться в поля (-и) родителя (расширяя их, если это необходимо), только если родитель определяет NO padding и NO border и в родительском элементе не существует промежуточного одноуровневого содержимого между дочерним элементом и началом блока содержимого родительского элемента; однако могут существовать плавающие или позиционируемые элементы одного уровня, которые игнорируются для вычисления полей, если только они не используют "clear:", чтобы также расширить родительский блок контента и полностью вписать в него свой собственный контент по вертикали (только родительская высота контента). поле увеличивается для верхнего-нижнего или нижнего-верхнего направления блока его содержимого или только для родительской ширины для направления слева направо или справа налево; родительского контента-бокса не играет роли).

Таким образом, если родительский объект определяет только 1px отступа или только 1px границы, то это не дает дочернему элементу сворачивать свое поле в родительское поле. Вместо этого дочерние поля вступят в силу из поля содержимого родительского элемента (или из поля границы промежуточного содержимого родного элемента, если он есть). Это означает, что любые ненулевые границы или ненулевые отступы в родительском объекте обрабатываются дочерним элементом, как если бы это было одноуровневое содержимое в том же родительском элементе.

Таким образом, это простое решение должно работать: используйте дополнительный родительский элемент без каких-либо рамок или отступов, чтобы установить минимальное поле для вложения в него дочернего элемента; вы все равно можете добавить границы или отступы к дочернему элементу (при необходимости), где вы будете определять его собственное вторичное поле (сворачиваясь в поля родительского (ых) поля)!

Обратите внимание, что дочерний элемент может сворачивать свои поля на несколько уровней родителей! Это означает, что вы можете определить несколько минимумов (например, для минимума между 3 значениями используйте два уровня родителей, чтобы содержать ребенка).

Иногда для учета необходимо 3 или более значений: ширина области просмотра, ширина документа, ширина контейнера сечения, наличие или отсутствие пространства для кражи внешних плавающих объектов в контейнере и минимальная ширина, необходимая для самого дочернего содержимого. Все эти значения ширины могут быть переменными и могут зависеть также от типа используемого браузера (включая его настройки доступности, такие как масштабирование текста или настройки "Hi-DPI" размеров в средствах визуализации в зависимости от возможностей целевого устройства просмотра, или иногда потому что существует настраиваемый пользователем выбор макетов, таких как личные "скины" или другие пользовательские настройки, или набор доступных шрифтов на конечном узле рендеринга, что означает, что точные размеры шрифтов трудно предсказать безопасно, чтобы соответствовать точным размерам в " пикселей "для изображений или границ; кроме того, пользователи имеют большое разнообразие размеров экрана или размеров бумаги при печати и ориентации; прокрутка также даже недоступна или не может быть компенсирована, а усечение переполненного содержимого чаще всего нежелательно; также использование чрезмерное "очищение" приводит к бесполезному расходованию пространства и делает документ гораздо менее доступным).

Нам нужно сэкономить место, не упаковывая слишком много информации и не оставляя ясности для читателей, и простоту навигации: компоновка - это постоянный компромисс между экономией места и одновременным отображением большего количества информации, чтобы избежать дополнительной прокрутки или перехода на другие страницы, а также сохранения упакованная информация отображается легко ориентироваться или взаимодействовать).

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