1
I already read several documentations about these property values width, but I couldn’t figure out what it was for. From what I tested in my examples the result is apparently the same. For example, when value is used fit-content on the property width in the specified element, it has the appearance of an element inline.
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
width: 500px;
height: 400px;
}
p {
width: fit-content;
background: green;
color: white;
}
</style>
</head>
<body>
<div>
<p>width</p>
</div>
</body>
</html>When value is used max-content it has the same effect.
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
width: 500px;
height: 400px;
}
p {
width: max-content;
background: green;
color: white;
}
</style>
</head>
<body>
<div>
<p>width</p>
</div>
</body>
</html>And the same effect you have using the value min-content.
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
width: 500px;
height: 400px;
}
p {
width: min-content;
background: green;
color: white;
}
</style>
</head>
<body>
<div>
<p>width</p>
</div>
</body>
</html>So as you saw in the examples above, the same things happen using the three properties fit-content, max-content and min-content i want to understand what serves each of these three properties and how to use them.
fit-contentThe width: the minimum internal length and/or the preferable smallest internal length and the available width (the width of the largest child). It does not behave with inline element no, pq if you put two Divs with width:fit-content gets each one in a row. https://developer.mozilla.org/en-US/docs/Web/CSS/width– hugocsl
Thanks @hugocsl, I understand a little how it works!
– Leandro Nascimento