All geek questions in one place

Difference between simple (width and height) and max / min (width and height)?

1 - What is the difference between simple (width and height) and max / min (width and height)? Explain what happens if the content, width and height of an element, for which (width and height) or max / min (width and height) are already specified in the internal style, grow 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 maximum height does not seem to affect the content of the element

as the height grows and contracts with the contents in it ?. Iam using IE8.

+6
source share
1 answer

Answers:

1: see below the difference between simple and maximum:

 #element { width: 100px; height: 100px; background-color: red; } <div id="element"> I'm a 100px wide, 100px high block! </div>

The top div will be a red block 100px and 100px wide on the page with the text "I am 100px wide, 100px height block" inside it. If the text was long for this block, it would either leak out, or if you put an overflow: hidden in your CSS for the element, the excess content would be hidden.

If you have done this:

 #element { max-width: 100px; max-height: 100px; background-color: red; } <div id="element"> I'm a flexible block! </div>

The element will be as large as your content, but if your content ever reaches 100 pixels in height or above the element, it will stop and it will do the same as in the above example (or disable the content if you have overflow: hidden in your css or the content is leaking to the page from the element).

2: If you need a big red block on the page or. use width / height if you need a small red block on the page, which should grow, but only to a certain size use max.

3: There are two types of elements inline and block , setting the height and width (max or simple) will not do anything on the inline element (which ap, in your example, is not). You can set it to lock in your CSS by adding display: block to p css or use the div instead (which by default is a block).

+9
source

Source: https://habr.com/ru/post/892461/

More articles:


All Articles