Extra

The Extra tab contains the CSS controls which help to adjust HTML properties for the elements in the template.

Position

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

static	Default value. Elements render in order, as they appear in the document flow
absolute	The element is positioned relative to its first positioned (not static) ancestor element
fixed	The element is positioned relative to the browser window
relative	The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position

To check how this property works, visit the link or video tutorial.

In Composer Online, the Position property can be adjusted in Printable and Microsite templates only.

Top

The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

The effect of the top depends on how the element is positioned (i.e., the value of the position property):

When a position is set to absolute or fixed, the top property specifies the distance between the element's outer margin of the top edge and the inner border of the top edge of its containing block.
When position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position.
When a position is set to sticky, the top property is used to compute the sticky-constraint rectangle.

When a position is set to static, the top property has no effect.

When both top and bottom are specified, the position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

Right

The right CSS property participates in specifying the horizontal position of a positioned element. A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky (in other words, it's anything except static). It has no effect on non-positioned elements.

The effect of right depends on how the element is positioned (i.e., the value of the position property):

When a position is set to absolute or fixed, the right property specifies the distance between the element's outer margin of the right edge and the inner border of the right edge of its containing block.
When a position is set to relative, the right property specifies the distance the element's right edge is moved to the left from its normal position.
When a position is set to sticky, the right property is used to compute the sticky-constraint rectangle.
When a position is set to static, the right property has no effect.

When both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both — for example, if a width is declared — the position of the element is over-constrained. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

Try the property via the link.

Left

The left CSS property participates in specifying the horizontal position of a positioned element. A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky (in other words, it's anything except static). It has no effect on non-positioned elements.

The effect of left depends on how the element is positioned (i.e., the value of the position property):

When a position is set to absolute or fixed, the left property specifies the distance between the element's outer margin of the left edge and the inner border of the left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)
When a position is set to relative, the left property specifies the distance the element's left edge is moved to the right from its normal position.
When a position is set to sticky, the left property is used to compute the sticky-constraint rectangle.
When a position is set to static, the left property has no effect.

When both left and right are defined, and width constraints don't prevent it, the element will stretch to satisfy both. If the element cannot stretch to satisfy both, the position of the element is overspecified. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

Try the property via the link.

Bottom

The bottom CSS property participates in setting the vertical position of a positioned element. A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky (in other words, it's anything except static). It has no effect on non-positioned elements.

The effect of the bottom depends on how the element is positioned (i.e., the value of the position property):

When a position is set to absolute or fixed, the bottom property specifies the distance between the element's outer margin of the bottom edge and the inner border of the bottom edge of its containing block.
When position is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position.
When a position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle.
When a position is set to static, the bottom property has no effect.

When both the top and bottom are specified, the position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

Try the property via the link.

Table-layout

The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns. There are 2 values: auto and fixed.

Auto: by default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.

Fixed: table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

Try the property via the link.

Word-break

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. There are 4 options: normal, break-all, keep-all, break-word

normal	Use the default line break rule.
break-all	To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as normal.
break-word	Has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

Try the property via the link.

Display

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid, or flex. Formally, the display property sets an element's inner and outer display types.

inline	Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block	Displays an element as a block element (like <p>). It starts on a new line and takes up the whole width
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

Try the property via the link.

Object-fit

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

contain	The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. The entire object is made to fill the box while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.
cover	The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
fill	The replaced content is sized to fill the element's content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.
none	The replaced content is not resized.
scale-down	The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

Try the property via the link.

Page-break inside

The page-break-inside CSS property adjusts page breaks inside the current element. There are 2 values:

Auto: Initial value. Automatic page breaks (neither forced nor forbidden).
Avoid: Avoid page breaks inside the element.

Try the property via the link.

Page-break After

The page-break-after CSS property adjusts page breaks after the current element.

always	Always force page breaks after the element.
avoid	Avoid page breaks after the element.
left	Force page breaks after the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.
right	Force page breaks after the element so that the next page is formatted as the right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.
Inherit	Inherit the behavior of the parent element.

Try the property via the link.

Page-break Before

The page-break-before CSS property adjusts page breaks before the current element.

This property applies to block elements that generate a box. It won't apply on an empty <div> that won't generate a box.

It has the same values as a page-break-before.

Try the property via the link.

Border-collapse

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.
When cells collapse, the border-style value of the inset behaves like a groove, and the outset behaves like a ridge.

When cells are separated, the distance between cells is defined by the border-spacing property.

separate	Borders are separated; each cell will display its own borders. This is the default.
collapse	Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit
revert	Reset the style.
unset	No styling is set.

Try the property via the link.

Vertical align

The vertical-align CSS property sets the vertical alignment of an inline, inline-block, or table-cell box.
The vertical-align property can be used in two contexts:

To vertically align an inline-level element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text.
To vertically align the content of a cell in a table.

Note that vertical alignment only applies to inline, inline-block, and table-cell elements: you can't use it to vertically align block-level elements.

These values vertically align the element relative to its parent element:

baseline	Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.
sub	Aligns the baseline of the element with the subscript baseline of its parent.
super	Aligns the baseline of the element with the superscript baseline of its parent.
text-top	Aligns the top of the element with the top of the parent element's font.
text-bottom	Aligns the bottom of the element with the bottom of the parent element's font.
middle	Aligns the middle of the element with the baseline plus half the x-height of the parent.

Try the property via the link.

Z-index

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
For a positioned box (that is, one with any position other than static), the z-index property specifies:

The stack level of the box in the current stacking context.

Whether the box establishes a local stacking context.

The period number of the Z-index for a particular element identifies its order in the hierarchy of the elements. The element with the highest number is displayed above all the elements, the element with the lowest number – vice versa.

Try the property via the link.

Composer Online - User space

Extra

Analytics

Position

Top

Right

Left

Bottom

Table-layout

Word-break

Display

Object-fit

Page-break inside

Page-break After

Page-break Before

Border-collapse

Vertical align

Z-index

Related content