如何将宽度设置为具有额外宽度的“fit-content”？

Question

I want to know how I can set the width of an element to fit-content , but I also want to add some more width. I cannot use padding, I only want to use width. Maybe something like width: fit-content + 50px or something like that?

EDIT: Example:

.element{
   width: fit-content + 50px;
}

Answer 1

It's not possible to use calc() to combine intrinsic and extrinsic units. The only option here is to use padding. Since you said you cannot apply padding to your element, you would need to create a child element to carry these styles.

Here's an example (I've added background to each to visualize)

 .acharb-outer { width: fit-content; margin: 1rem 0; background: #ffd166; }.acharb-inner { padding: 0 2rem; background: #ef476f; } span { background: #06d6a0; }

 <div class="acharb-outer"> <div class="acharb-inner"> <span>Quisque ut dolor gravida.</span> </div> </div> <div class="acharb-outer"> <div class="acharb-inner"> <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span> </div> </div> <div class="acharb-outer"> <div class="acharb-inner"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span> </div> </div>