> For the complete documentation index, see [llms.txt](https://velara-3.gitbook.io/web-export/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://velara-3.gitbook.io/web-export/element-options/size.md).

# Width and Height Size

Setting the size of the element using width and height

The size fields are a short cut to setting the width and height. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LpECOhSkvyVKX3_0aIZ%2F-LpEDTmGHf3jj7a4XUpB%2Fimage.png?alt=media\&token=cf3351df-d552-475a-bbbe-d0908040bb77)

By default the width and height matches the elements width and height on the artboard. 

If you set your own width and height be sure to include the size length type. 

For example, if you want an element to be 100% width and height then enter 100% for each field.

{% hint style="warning" %}
Setting the width of an element to 100% will expand it to 100% of its container (group). If the element is not flush along the left edge of the container (x is 0) then setting the width to 100% will make it extend past the container edge. 

If the left edge of an element is not at the edge anchor an element using the left and right [constraints](/web-export/element-options/untitled-1.md) and remove the explicit width using -width in the styles field. 
{% endhint %}

You can also set the width and height and related values in the Styles fields using:

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LpECOhSkvyVKX3_0aIZ%2F-LpEEVXEv6sTuF7UPixx%2Fimage.png?alt=media\&token=bcb29d6f-e49b-4f14-8807-805084ff6ef6)

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LpECOhSkvyVKX3_0aIZ%2F-LpEEdTijPYqbHTq-wR1%2Fimage.png?alt=media\&token=3d1fb45e-e8d7-4775-a552-6447023fc488)

You can set a minimum width and a max width using the min-width and max-width properties: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LpECOhSkvyVKX3_0aIZ%2F-LpEEolGIymaX3CfjL3L%2Fimage.png?alt=media\&token=492a892e-d954-4197-ae01-247b5a103637)

{% hint style="info" %}
You can also include or exclude the width and height CSS properties using the [sizing options](/web-export/element-options/layout-section/sizing-options.md). 
{% endhint %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/width>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/min-width>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/max-width>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/height>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/min-height>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/max-height>" %}