In HTML we use elements to take up the full width of the page. These differ in properties from elements, which are typically found within text flow. block inline Learn about the Box Model Both and elements are important components of CSS. inline block When we create a new or other element, it takes up the full width of the page - but what if we want a or any other DOM element to only be the width of its contents and no more? To make an HTML an element like a div take up no more space than its content, we can use the keyword. div block div block block fit-content For example, here is a containing some dummy text with a background. Even though the content is short, the takes up the whole page: div div If we want this div to now only take up the same width as its content, we can add : fit-content div {
    width: fit-content;
} Now our is much smaller, and only as large as the content it contains: div Conclusion and Support Support for is quite broad, but it will not work in Internet Explorer. Similarly, some browsers will only support it for , and not for other properties. In any case, you can be pretty confident using this property with , but there may be some caveats when applying it to other CSS properties. fit-content width width . A full list of support can be found on caniuse.com . If you want to learn more about CSS, click here Also Published here

Too Long; Didn't Read

Making security fun one episode at a time

How to Set a div to Its Content's Width in CSS

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Set a div to Its Content's Width in CSS

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES