Menu
1-What's the difference between simple(width and height) and max/min(width and height)? Explain in terms of what will happen if the content, width and height of the element, for which (width and height) or max/min(width and height) is already specified in an internal style, grows more than the specified ones?
2-Secondly, how do we know which one to use when?(simple or max/min)
3-In the following example:
<html>
<head>
<style type="text/css">
p
{
max-height:50px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
</p>
</body>
</html>
Here, the max-height seems to have no effect on the content of the
element as it's height grows and shrinks with the content in it?. Iam currrently using IE8.
805
asked Jul 11 '11 05:07
Answers:
1: Please see below for the difference between simple and max:
#element {
width: 100px;
height: 100px;
background-color: red;
}
<div id="element">
I'm a 100px wide, 100px high block!
</div>
The div above will be a 100px high and 100px wide red block on the page with the text 'I'm a 100px wide, 100px height block' inside it. If the text were to long for this block it would either leak out or if you put overflow: hidden in your css for the element, the excess content would be hidden.
If instead you did this:
#element {
max-width: 100px;
max-height: 100px;
background-color: red;
}
<div id="element">
I'm a flexible block!
</div>
The element would be as large as your content but if your content ever reached 100px high or over the element would stop and it would do the same thing as the above example (either cut the content off if you have overflow: hidden in your css or the content will leak into the page from the element).
2: If you want a big red block on the page or. use width/height, if you want a small red block on the page that needs to grow but only grow to a certain size use max.
3: There are two types of elements inline and block, setting height and width (max or simple) will do nothing on an inline element (which a p, in your example, is not). You can set it to block in your css by adding display: block to the p css or use a div instead (which is block by default).
55
answered Nov 14 '22 22:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With