1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4352],{5400:function(e,t,n){n.r(t),n.d(t,{assets:function(){return a},contentTitle:function(){return d},default:function(){return g},frontMatter:function(){return r},metadata:function(){return i},toc:function(){return c}});var i=JSON.parse('{"id":"styling/width-height","title":"Width and Height","description":"The width property specifies the width of the node\'s border box (the collective size of the node\'s content, padding, and border).","source":"@site/docs/styling/width-height.mdx","sourceDirName":"styling","slug":"/styling/width-height","permalink":"/docs/styling/width-height","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/yoga/tree/main/website/docs/styling/width-height.mdx","tags":[],"version":"current","sidebarPosition":14,"frontMatter":{"sidebar_position":14},"sidebar":"docsSidebar","previous":{"title":"Min/Max Width and Height","permalink":"/docs/styling/min-max-width-height"}}'),h=n(2540),o=n(3023),s=n(7266);const r={sidebar_position:14},d="Width and Height",a={},c=[];function l(e){const t={a:"a",h1:"h1",header:"header",p:"p",strong:"strong",...(0,o.R)(),...e.components};return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(t.header,{children:(0,h.jsx)(t.h1,{id:"width-and-height",children:"Width and Height"})}),"\n",(0,h.jsx)(t.p,{children:"The width property specifies the width of the node's border box (the collective size of the node's content, padding, and border).\nSimilarly height property specifies the height of the node's border box."}),"\n",(0,h.jsx)(t.p,{children:"Both width and height can take following values:"}),"\n",(0,h.jsxs)(t.p,{children:[(0,h.jsx)(t.strong,{children:"Auto"}),": The default Value, Yoga calculates the width/height for the node based\non its content, whether that is other children, text, or an image."]}),"\n",(0,h.jsxs)(t.p,{children:[(0,h.jsx)(t.strong,{children:"Pixels"}),": Defines the width/height in absolute pixels. Depending on other properties set on\nthe Yoga node this may or may not be the final dimension of the node."]}),"\n",(0,h.jsxs)(t.p,{children:[(0,h.jsx)(t.strong,{children:"Percentage"}),": Defines the width or height in percentage of its ",(0,h.jsx)(t.a,{href:"/docs/advanced/containing-block",children:"containing block's"})," width or height respectively."]}),"\n",(0,h.jsx)(s.A,{code:"<Layout config={{useWebDefaults: false}}>\n<Node\n style={{\n width: 200,\n height: 200,\n padding: 10,\n }}>\n <Node\n style={{\n margin: 5,\n height: 50,\n width: 50,\n }}\n />\n</Node>\n</Layout>"})]})}function g(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,h.jsx)(t,{...e,children:(0,h.jsx)(l,{...e})}):l(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.