width:
Свойство width определяет ширину области содержимого элемента.Область содержимого находится внутри отступа, границы и поля элемента.
min-width:
Свойство min-width CSS используется для установки минимумаширина данного элемента.Он не позволяет используемому значению свойства width становиться меньше значения, указанного для min-width.
max-width:
Свойство CSS max-width равноиспользуется для установки максимальной ширины данного элемента.Он не позволяет используемому значению свойства width становиться больше значения, указанного для max-width.
Для получения дополнительной информации посетите Источник информации .
Отредактировано
это также относится к высоте,
, чтобы сделать ее более простой и более общей
something = 10px;
значение не является ни меньше, нибольше 10px.
min-something = 10px;
минимальное значение не может быть ниже заданного значения свойства.Например, 10px, 11px, 20px, 300px выше минимального уровня, поэтому оно принимается.Таким образом, изображение не может быть меньше 10 пикселей в разрешении.
max-something = 10px;
максимальное значение не может превышать или превышать заданное значение свойства.Например, 9px, 8px, 5px, 0px ниже максимального уровня, поэтому это допустимо.Таким образом, разрешение изображения не должно превышать 10 пикселей.
Ниже приведено несколько примеров
min ширина и высота 100px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
min-width: 100px;
min-height: 100px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px *100px
</div>
мин. Ширина и высота 60px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
min-width: 60px;
min-height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px * 100px
</div>
ширина и высота 60px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
width: 60px;
height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px * 100px
</div>
ширина и высота 100px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
width: 100px;
height: 100px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px * 100px
</div>
Также обратите внимание, что
в вашем случае, когда вы используете максимальную ширину, вам нужно определить min-ширина также.min-width даст вам пространство формы для показа.