Html font size padding

CSS increase padding from font-size not linear

If your font-size and thereby 1em increases by 1px and the padding should increase by 5px for every pixel of font-size above 16px, padding should be calc(1.875 * 16px + ((1em — 16px) * 5)) — the original padding at 16px (1.875 * 16px) plus the difference of the font-size to 16px times 5.,I have an element that have a padding based on the font-size by using the em unit. But I need to increase the padding for 5px each time the font-size increase of 1px. I’m not even sure if it’s possible using the calc() function or an other way ?,My aim is not to have to write media-queries inside the element/component, it should only depends on the font-size of its parent., Are there rules and/or lore in any edition of D&D for managing time-travel paradoxes?

.test < font-size: 16px; padding: 1.875em; border: 1px solid red; >@media (min-width: 300px) < .test < font-size: 17px; >> @media (min-width: 600px) < .test < font-size: 18px; >>

.test < font-size: 16px; padding: 1.875em; border: 1px solid red; >@media (min-width: 300px) < .test < font-size: 17px; >> @media (min-width: 600px) < .test < font-size: 18px; >>

Answer by Maurice Riley

Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior at different screen sizes more predictable — All in a single line of CSS, thanks to clamp().,Here, we’re gonna lean a bit to the math side. When paired together, the viewport widths and the font sizes make two points on an X and Y coordinate system, and those points make a line.,Wouldn’t it just always be the preferred value then, assuming you aren’t being weird and set it between the minimum and maximum? Well, you’re rather expected to use a formula for the preferred value, like:,I’m working on a CMS where the user gets to pick min and max font-size, so I can capture this formulas in a ready-made template-like code and it saves lots of time without requiring javascript.

clamp(minimum, preferred, maximum);

Wouldn’t it just always be the preferred value then, assuming you aren’t being weird and set it between the minimum and maximum? Well, you’re rather expected to use a formula for the preferred value, like:

1rem = 360px and below Scaled = 361px - 839px 3.5rem = 840px and above

We kinda need that line — or rather its slope and its intersection with the Y axis to be more specific. Here’s how to calculate that:

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope + minFontSize

Now we build the clamp() function. The formula for the preferred value is:

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

So the function ends up like this:

Here’s a useful JavaScript function to do the calculations:

// Takes the viewport widths in pixels and the font sizes in rem function clampBuilder( minWidthPx, maxWidthPx, minFontSize, maxFontSize ) < const root = document.querySelector( "html" ); const pixelsPerRem = Number( getComputedStyle( root ).fontSize.slice( 0,-2 ) ); const minWidth = minWidthPx / pixelsPerRem; const maxWidth = maxWidthPx / pixelsPerRem; const slope = ( maxFontSize - minFontSize ) / ( maxWidth - minWidth ); const yAxisIntersection = -minWidth * slope + minFontSize return `clamp( $< minFontSize >rem, $< yAxisIntersection >rem + $< slope * 100 >vw, $< maxFontSize >rem )`; > // clampBuilder( 360, 840, 1, 3.5 ) -> "clamp( 1rem, -0.875rem + 8.333vw, 3.5rem )"

So how do we do this? To start, the ratio between font sizes and viewport widths must stay the same. In this example, we go from 1rem at 320px to 3rem at 960px.

If we’re using the clampBuilder() function we made earlier, that becomes:

const text = document.querySelector( "p" ); text.style.fontSize = clampBuilder( 320, 960, 1, 3 );

Don’t sweat it, here’s a snippet to calculate an element’s ch size:

// Returns the width, in pixels, of the "0" glyph of an element at a desired font size function calculateCh( element, fontSize )

Now we can proceed to set the text’s width:

function calculateCh( element, fontSize ) < . >const text = document.querySelector( "p" ); text.style.fontSize = clampBuilder( 320, 960, 1, 3 ); text.style.width = `$< 320 / calculateCh(text, "1rem" ) >ch`;

So what do we do? When we do this:

…we can scale the result down by multiplying it by a number smaller than 1. 0.9 does the trick. That means the text’s width is going to be 90% of the viewport width, which will more than account for the small amount of space taken up by the scrollbar. We can make it narrower by using an even smaller number, like 0.6.

function calculateCh( element, fontSize ) < . >const text = document.querySelector( "p" ); text.style.fontSize = clampBuilder( 20, 960, 1, 3 ); text.style.width = `$< 320 / calculateCh(text, "1rem" ) * 0.9 >ch`;

You might be tempted to simply subtract a few pixels from 320 to ignore the scrollbar, like this:

Answer by Zachary Gray

The line-height property is specified as any one of the following:,Sets the line height to the content height of the current block.,It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well., offset-distance

/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* values */ line-height: 3em; /* values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: revert; line-height: unset; 

Answer by Leonardo Palacios

Use the box-sizing property to keep the width at 300px, no matter the amount of padding:,To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.,Use the padding shorthand property with three values: ,% — specifies a padding in % of the width of the containing element

CSS Padding

The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.

Answer by Presley Browning

In the before case, the button has the word “تم”, which means Done. The button width is too small, so I increased the min-width of it as you notice in the after case.,Notice that the button’s “Get” width is too small. Without setting a minimum width, this can get worse in case there was no text for any reason. Setting a minimum width is important in that case.,Set the max-width to be equal to the container width,The first thing to discuss is width-related properties. We have min-width and max-width, and each one of them is important and has its use cases.

Answer by Isaiah Christensen

JavaFX CSS does not support comma-separated series of font family names in the -fx-font-family property. The optional line height parameter when specifying fonts is not supported. There is no equivalent for the font-variant property.,A series of image URIs, separated by commas.,The following syntax for linear gradient does not conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 2.0 CSS parser supports the syntax but this support may be removed in later releases.,The following syntax for radial gradient does not conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX 2.0 CSS parser supports the syntax but this support may be removed in later releases.

A style sheet URL may be an absolute URL or a relative URL. If a relative URL is given, it is resolved against the base URL of the ClassLoader of the concrete Application class. If, for example, there is a main class com.wicked.cool.ui.Main that extends Application, the relative URL «com/wicked/cool/resources/styles.css» would resolve correctly. The relative URL «../resources/styles.css» would not since the path «..» relative to the root is not a valid path. It is often easier to use the ClassLoader of some class to find the resource. For example, if the «styles.css» file resides in the same package as Main, the following code will give the correct URL: com.wicked.cool.ui.Main.class.getResource(«styles.css»).toExternalForm()

A style sheet URL may be an absolute URL or a relative URL. If a relative URL is given, it is resolved against the base URL of the ClassLoader of the concrete Application class. If, for example, there is a main class com.wicked.cool.ui.Main that extends Application, the relative URL «com/wicked/cool/resources/styles.css» would resolve correctly. The relative URL «../resources/styles.css» would not since the path «..» relative to the root is not a valid path. It is often easier to use the ClassLoader of some class to find the resource. For example, if the «styles.css» file resides in the same package as Main, the following code will give the correct URL: com.wicked.cool.ui.Main.class.getResource(«styles.css»).toExternalForm()

com.wicked.cool.ui.Main.class.getResource("styles.css").toExternalForm()

Answer by Stefan Ayala

Buttons are usually the element used for calls-to-action, so padding them appropriately makes them stand out just enough for a user to click. Similarly to the way you would add padding to a text element, the same process can be done for a button.,You can add padding to create space between your images, text, and other content, which helps prevent your website from looking cluttered.,As you can see below, the page looks significantly less compact when padding is added around the image. It creates enough space for the elements to look comfortable, not cluttered, on the page.,In a situation where you provide only one padding value, it is assumed that all four sides of the element should be padded at that value, such as:

Источник