How to limit the size of an element with padding in CSS?

Asked

Viewed 250 times

0

I want to create an HTML page with a <div> which has a fixed height of 450px to save text and other elements. To do this, I created a class with the following CSS properties.

.minhaClasse{
    height: 450px;
    max-height: 450px;
}

The problem is that the property max-height doesn’t work when I add padding for the element. On some HTML pages, I need to add a padding-top item to scroll down text on page.

See the example below:

.minhaClasse{
    height: 450px;
    max-height: 450px;
}
<body align="center">
    <div class="minhaClasse" style="padding-top: 100px;">
        Meu texto dentro da DIV 100px abaixo <br>
        (gostaria que a div permanecesse com 450px de altura)
    </div>
</body>

As you can see, the size of the <div> exceeds the height limit of the element. What I want to know is, how can I limit the height of my element, even adding a padding to him ?

css height

  • If you have height: 450px; doesn’t need max-height: 450px;, unless you’re using some form of diplay other than block, what seems improbable.

  • Why use/not use * box-Sizing? https://answall.com/questions/100623/por-que-usar-n%C3%A3o-usar-box-Sizing

1 answer

1


If you have height: 450px; doesn’t need max-height: 450px;, unless you are using any means of diplay other than block, what seems unlikely for your case, to solve would just use box-sizing: border-box; or backwards compatible:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

The box-Sizing property by default uses the value content-box, each value has a box-model behavior, which will behave differently according to padding, border, margin and the content itself

box-Sizing: content-box

This is the default value of the property, makes the element have the height adjusted by width (width) and height (height) and content included (limited) in the measurements, but does not "limit" the padding, border and margin

For example if an element has height: 300px; and adds a padding-bottom: 50px; the height will be height: 300px;

If you only have the height and the padding is zero, but the content goes from 300px the element will still have 300px, the content will only "leak out" from the box-model as it has crossed the limit.

box-Sizing: padding-box

Width (width), height (height) and padding properties include (are limited) to box-model, but will not be included border or margin.

box-Sizing: border-box

Width (width) and height (height) properties) padding and border include (are limited), but will not be included property margin.

Browser other questions tagged css height

You are not signed in. Login or sign up in order to post.