This question already has an answer here:
css how to make max-width fixed when adding padding
(1 answer)
Closed 6 months ago.
I'm learning CSS with W3school,in max width lesson, it was said the max-width is the maximum width of an element
So in this code i see this rule is not actually work!
<style>
div {
width:499px;
max-width: 500px;
height: 100px;
padding: 30px;
background-color: powderblue;
}
</style>
When i increase the padding , the width on the site will also increase.
What is the missing point in this lesson?
In what circumstances the max-width will work correctly?
The problem can be solved when you add this to your CSS code.
box-sizing: border-box;
I suggest watching some tutorials about this line of code.
Related
This question already has answers here:
Child with max-height: 100% overflows parent
(11 answers)
Closed 3 years ago.
When I have a container with max-width:80vw and max-height:80vh, the image contained within it is not behaving properly in line with object-fit:contain. The image has height:100% and width:100% as well as object-fit:contain but the shortest dimension of the image fills the container with the longer dimension overflowing.
Please have a look at this url:
https://mutatedllama.pythonanywhere.com/share/7h25JNbi
Could somebody help me to understand where I am going wrong?
height: 100% only works if every ancestor element also has a defined height (so implicit height: auto; will cause it to fail).
I was able to make it work in the page by setting an explicit height: 100% on html, body, div.container, div.row.justify-content-center, and div#image-box - this is the descendant path from <html> to the <img /> - but obviously this is a bad idea.
In short: don't use height: 100%;
Instead, make the div#image-box a display: flex; with flex-direction: column; and give the img flex-grow: 1;.
Things are complicated by the overlay img sibling of the original cat picture - you may need to play with your HTML structure.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
Example:
https://codepen.io/229075284/pen/aboQVXZ
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
<div class="outer">
<div class="inner"></div>
</div>
When I set display of outer::after to inline-block,the outer will have some extra space marked as pink, even if set font-size and line-height to 0. However, when I set display to table,the extra space disappears.
So I am wondering why the extra space appears?
I checked your codepen. It is a combination of both display: inline-block and content: "" on the ::after pseudo element. You are basically telling the browser that right after the outer element you want to reserve an element's place in the DOM.
You could see that if you remove the content: "" although you are using inline-block the extra pseudo div after the .outer element would disappear. That is because although you stated a certain display mode you practically have no content in this element and the browser ignores your element because it has no fixed size in pixels and no actual content within it.
The reason .outer is growing is that its height is set to auto in default, if you would give it a fixed height in pixels it might not show the spare div.
Your question has nothing to do with line-height or `overflow'.
Me personally I prefer not to use pseudo-classes like ::after and ::before in production. I prefer using regular divs and have my code more readable and understandable by other developers, anyway I hope I helped out. Feel free to discuss further if you have more questions.
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed 3 years ago.
I am trying to make the following design layout in css/html, but I can't get the inverted border-radius style encircled in blue (BOTTOM-LEFT).
So far, i am using the following css properties in my div:
border-radius: 0 0 0 3rem;
The result is the following:
I have tried to make a margin-top:-3rem of the next div which works but destroys the div height structure for full screen ui and make me change all the weight percentages which is not elegant. Also, I found these tricks from stackoverflow but I don't know how can I get the result based on their code and also it's not simple at all.
Looking for suggestions and easy tricks to achieve this.
Pardon the inline styling but you just need to work with position, z-index and negative margin-bottom
<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>
if you want to make design like the example, just add padding to your div. And it will solve your problem.
This question already has answers here:
Bootstrap 4 square grid
(2 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 4 years ago.
I'm building some global button classes for a CSS framework, and I'm wondering if there's any way to set an element's width to be the same as the height without hard-coding it.
Here's an example of how it would work:
HTML
<button class="button square-button">OK</button>
<div class="container">
<button class="button large-button square-button">OK</button>
</div>
CSS
.button {
height: 50px;
padding: 0 20px;
}
.square-button {
width: (always-same-as-height);
padding: 0; // Disable padding so it becomes a square
}
...
.container {
height: 100px
.button {
height: inherit;
}
}
In some scenarios I want to be able to set the height depending on the container height, and have all the buttons with the square-button class dynamically resize to that height while still staying a perfect square shape.
Is this possible using only CSS?
You can make use of CSS variables modules to achieve that. However, the browser support for CSS variables is not so good. So, proceed with caution by first checking if the browser versions you wish to support have implemented CSS modules or not.
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 7 years ago.
I have a DIV with a default fixed height and an overflow:hidden property to hide content that is to broad to be contained inside it.
div
{
height:50px;
overflow:hidden;
}
I would like to autoexpand this DIV hovering it with mouse but I have the problem that CSS transition works only with a fixed height and not with an auto height.
Here a JsFiddle that illustrate two cases.
I know that reason is that for some reason browrse does not know "how many px are auto height" but is there exist a workaround (maybe using max-height property...) to avoid need of jQuery?
When you give height: auto in the animation, it doesn't know what to do. As it cannot calculate the height on the fly. So, initialize the height using jQuery this way:
$(function () {
$(".auto_height").each(function () {
$(this).data("height", $(this).height());
});
});
And in CSS, give:
height: attr(data-height);