CSS3 Box Sizing

Versions

Author: Softpress Support

relative css3 responsive inflow

Allows you to change items' box sizing value from the default of padding-box to border-box.

This will cause the width and height to be defined by the distance between its borders, rather than its padding.

An example for wanting to do this would be if you want an item with padding to always be 100% of the width of its parent (common in responsive layouts). If the default value of padding-box is set then the item will be bleed outside the bounds of its parent by the amount of padding applied to the item.

The width/height of an item will automatically be changed to the width/height + any padding applied to the item.

As an added bonus, when the sizing is set to border-box you can tell the Action to automatically convert the width/height to a percentage value. Note that this may result in fractional percentages (a common feature request) which is unsupported in some browsers (in which case rounding up or down may occur).

How to use the Action

1. Apply the Box Sizing Action to a Layer HTML item
2. Choose the sizing type you want to use (border-box will be selected by default)
3. If you’ve selected border-box, choose whether you want the Action to convert the width or height to a percentage value

1 Comment