{"id":6504,"date":"2024-04-14T15:31:27","date_gmt":"2024-04-14T07:31:27","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6504"},"modified":"2024-04-15T23:29:10","modified_gmt":"2024-04-15T15:29:10","slug":"enter-values-and-measurements","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/enter-values-and-measurements\/","title":{"rendered":"Enter values and measurements"},"content":{"rendered":"
\n

If you’re setting the spacing, dimensions, or rotation of an element using transformations, you can input the numerical value along with the appropriate unit into the corresponding field. It’s also possible to perform calculations within numeric input fields. Need to increase the size of your div block? Type *2 after the current value and hit enter.<\/p>\n

When you place an element on the canvas and adjust its size, the initial width and height of the element will align with its “natural” dimensions based on the existing layout flow.<\/p>\n

Modifying input values with your keyboard<\/h2>\n

Focus on a numerical field and use the up \u2191 and down \u2193 arrows on your keyboard to increment or decrement the value by 1. Holding down Shift while doing this will adjust the value by 10. Press ESC to unfocus the input field.<\/p>\n

Applying preset spacing to multiple sides<\/h4>\n

To set spacing for multiple sides using a preset:<\/p>\n

    \n
  1. Navigate to the Spacing section and select a value for one of the sides<\/li>\n
  2. Hover over the desired preset value<\/li>\n
  3. Press and hold Option (on Mac) or Alt (on Windows) while clicking on the chosen value<\/li>\n<\/ol>\n
    \n
    <\/div>\n<\/figure>\n

    By following these steps, the preset will be applied to both sides of the element \u2014 or you can press Shift to apply the value to all sides simultaneously.<\/p>\n

    Adapting input values using your mouse<\/h2>\n

    Once you’ve clicked into a numeric input field, hold Option (on Mac) or Alt (on Windows) and then drag your mouse to adjust the value (drag left to decrease or right to increase). This way, you can make adjustments without removing your right hand from the mouse.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Progressive values<\/h4>\n

    Hold Option (on Mac) or Alt (on Windows) to reveal incremental arrows next to your input field, allowing you to add or subtract incrementally by clicking the up or down arrow beside the value.<\/p>\n

    \n
    \"Add<\/div>\n<\/figure>\n

    Adjusting spacing values across multiple sides<\/h4>\n

    While adjusting the margin and padding controls, hold Option (on Mac) or Alt (on Windows) to uniformly apply the same value to all sides, or press Shift to apply the value inclusively.<\/p>\n

    Altering units<\/h2>\n

    You can modify the unit in an input field through the unit dropdown menu or by appending the unit after the value.<\/p>\n

    When switching from px to %, the approximate conversion will be automatically calculated for you.<\/p>\n

    CSS measurements<\/h2>\n

    Most input fields offer a variety of units to choose from, including:<\/p>\n

      \n
    • PX (Pixels) \u2013 relative to screen resolution<\/li>\n
    • % (Percentage) \u2013 relative to parent element<\/li>\n
    • EM \u2013 relative to parent element’s font size<\/li>\n
    • REM \u2013 relative to body element’s font size<\/li>\n
    • VH \u2013 relative to viewport height where 100vh is the viewport height<\/li>\n
    • VW \u2013 relative to viewport width where 100vw is the viewport width<\/li>\n
    • – \u2013 no unit<\/li>\n
    • Small, large, and dynamic viewport units (e.g., DVH, DVW, SVH, SVW, LVH, and LVW)<\/li>\n<\/ul>\n

      For certain fields, you can substitute the unit with values like:<\/p>\n

        \n
      • Auto<\/li>\n
      • None<\/li>\n<\/ul>\n
        Please note:<\/strong> When using units in an input field within the Designer, SVH, SVW, LVH, and LVW units will not appear in the unit dropdown. To utilize these units in an input field, input the value followed by the unit letters (e.g., 100 SVH) in the field and press Enter<\/strong>.<\/h6>\n

        Text style units<\/h3>\n

        When setting properties like font size or line height, the default unit applied to the input value is typically pixels (px). You have the option to choose from various other units that affect typography sizing.<\/p>\n

        Pixels (px) [Default]<\/h4>\n

        Font size values in pixels can scale proportionally with images and elements assigned a pixel value. To use pixels as the default value, simply type a numeric value, such as 90, and then hit enter. The value will be 90px.<\/p>\n

        Ems (em)<\/h4>\n

        Each browser has a standard font size, typically 16px. If you set the font size of an element to 1em, it will equate to 16px. Doubling it to 2em equals 32px.<\/p>\n

        \n
        \"Typography<\/div>\n<\/figure>\n

        Ems are relative to the font size of their parents. So, if a parent has a font size value of 0.5em, a child paragraph with a font size of 1em will be 8px (16 x 0.5 = 8px), while another paragraph located elsewhere may be 16px.<\/p>\n

        \n
        \"Typography<\/div>\n<\/figure>\n

        Rems or – Root ems (rem)<\/h4>\n

        As an alternative to ems, root ems (rems) are based on the HTML font size, maintaining consistency with the browser’s default font size. Hence, 1rem always equals 16px, regardless of the parent’s font size adjustments.<\/p>\n

        \n
        \"Typography<\/div>\n<\/figure>\n

        Percentage (%)<\/h4>\n

        Similar to ems, percentages in typography sizing are relative to the parent element’s font size.<\/p>\n

        Viewport Units (vw & vh)<\/h4>\n

        Viewport units are effective for creating responsive typography. Viewport width (vw) adjusts based on the viewport’s width, ideal for scaling text proportionally to the viewport width. Likewise, viewport height (vh) scales text relative to the viewport’s height.<\/p>\n

        When employing viewport units, it’s advisable to test across different devices, especially with vh, as font sizes may vary significantly.<\/p>\n

        Line spacing units<\/h3>\n

        Unitless [Default]<\/h4>\n

        Utilizing “unitless” produces line height as a multiple of the font size, automatically scaling the line height with font size changes. To set “unitless”, select “-” from the unit menu or type “-” after the value and press enter.<\/p>\n

        Percentage (%)<\/h4>\n

        Percentage values for line height also adjust in proportion to font size. However, percentage values may present inheritance complications, making “unitless” a preferable choice.<\/p>\n

        Fixed units<\/h4>\n

        For greater line height control, you can opt for fixed values like px, em, or rem.<\/p>\n

        Angle units<\/h3>\n

        Angle units are pivotal for shadows, transformations like rotate and skew, and the hue rotate filter. Positive values rotate clockwise, while negative values rotate counterclockwise.<\/p>\n

          \n
        • DEG (\u2013degrees) \u2013 spanning from 0 to 360deg, where 0 and 360 are equivalent.<\/li>\n
        • RAD (\u2013radians) \u2013 equal to 180\/\u03c0 degrees or roughly 57.3deg<\/li>\n
        • GRAD ( \u2013grads) \u2013 equal to 1\u2044400 of a full circle<\/li>\n
        • TURN (\u2013 turns) \u2013 signifies one complete rotation, equivalent to 360deg.<\/li>\n<\/ul>\n

          Time units<\/h3>\n

          Time units are employed for defining durations in transitions and interactions.<\/p>\n

            \n
          • MS \u2013 milliseconds. 1000 milliseconds equals 1 second.<\/li>\n<\/ul>\n

            \u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Enter and update numeric values, and use different units in numeric input fields.","protected":false},"author":2,"featured_media":5280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6504","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6504"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6504\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5157"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}