Meta tags:
description=Various dimension controls are built into different blocks to help you achieve greater customization for your layout and design, especially when combined. Padding and margin are two important properties, and they essentially do the same thing - they create extra space. But the question is, where? In this session, we will explore how to use…;

Headings (most frequently used words):

padding, versus, margin, learning, outcomes, comprehension, questions, transcript, presenters, workshop, details,

Text of the page (most frequently used words):
the (91), and (46), #margin (29), you (28), padding (22), wordpress (18), block (18), change (16), for (15), can (12), settings (11), space (11), are (11), this (10), learn (9), will (9), our (8), have (8), click (8), when (8), more (7), going (7), slider (7), dimension (7), controls (7), use (6), add (6), blocks (6), vertical (6), around (6), that (6), top (6), setting (6), visit (5), org (5), about (5), let (5), between (5), two (5), three (5), dots (5), select (5), example (5), sidebar (5), pixels (5), but (5), set (5), custom (5), size (5), bottom (5), sides (5), option (5), get (4), open (4), now (4), these (4), some (4), extra (4), then (4), value (4), design (4), only (4), your (4), they (4), versus (4), account (3), page (3), content (3), view (3), able (3), tutorials (3), columns (3), text (3), left (3), all (3), right (3), look (3), make (3), where (3), separately (3), notice (3), again (3), thing (3), important (3), using (3), explore (3), creates (3), help (3), search (3), wordcamp (2), patterns (2), themes (2), plugins (2), showcase (2), developers (2), support (2), hosting (2), news (2), source (2), work (2), under (2), join (2), online (2), workshop (2), transcript (2), english (2), confidently (2), added (2), cover (2), information (2), parent (2), firstly (2), course (2), altering (2), improve (2), first (2), values (2), each (2), one (2), difference (2), unlink (2), once (2), configure (2), reset (2), note (2), heading (2), impacts (2), mentioned (2), also (2), from (2), zero (2), double (2), border (2), available (2), additional (2), what (2), inside (2), element (2), various (2), built (2), into (2), different (2), achieve (2), greater (2), customization (2), layout (2), especially (2), combined (2), properties (2), essentially (2), same (2), create (2), question (2), how (2), web (2), 2022 (2), nov (2), linkedin, instagram, twitter, facebook, public, code, privacy, matt, com, bbpress, buddypress, involved, donate, instructional, designer, project, sponsored, automattic, strong, supporter, movement, background, education, development, husband, father, dreamer, lifelong, learner, west7, wes, theron, presenters, licensed, creative, commons, attribution, sharealike, international, license, know, found, typo, grammar, error, outdated, screenshot, suggestions, live, print, subtitles, language, mins, length, details, trust, training, material, next, time, large, last, with, too, far, drag, way, 100, much, better, positioned, unit, measurement, horizontal, there, before, second, worth, mentioning, default, styling, applied, editor, image, sure, finish, off, looking, few, examples, enlarge, buttons, case, changing, separate, options, just, paragraph, take, closer, very, usually, used, gaps, elements, gap, group, previously, consistently, its, dragging, down, below, side, find, label, dimensions, see, section, opt, spacing, optional, might, allow, please, lot, being, done, provide, flexibility, well, hopefully, visual, depiction, clear, adds, boundary, talking, today, welcome, global, styles, site, comprehension, questions, resetting, unliking, configuring, locating, sliders, learning, outcomes, session, home, contribute, lesson, plans, courses, workshops, enterprise, gutenberg, five, future, job, board, photo, directory, meetups, community, forums, mobile, openverse, download, extend, register, log, skip, wayback, machine, http, archive, 20221203162435, https, tutorial, timestamps, capture, fail, success, 2023, 2021, jan, dec, sep, 2024, captures,

Text of the page (random words):
padding versus margin learn wordpress 8 captures 26 nov 2022 14 sep 2024 nov dec jan 03 2021 2022 2023 success fail about this capture timestamps the wayback machine http web archive org web 20221203162435 https learn wordpress org tutorial padding versus margin skip to content log in register wordpress org news download extend get wordpress themes patterns plugins openverse mobile hosting learn learn wordpress support forums wordpress tv developers community make wordpress wordcamp meetups photo directory job board five for the future about about wordpress showcase gutenberg enterprise get wordpress search get wordpress learn wordpress tutorials online workshops courses lesson plans contribute search for search learn home tutorials padding versus margin padding versus margin various dimension controls are built into different blocks to help you achieve greater customization for your layout and design especially when combined padding and margin are two important properties and they essentially do the same thing they create extra space but the question is where in this session we will explore how to use these controls more confidently learning outcomes locating and using the padding and margin sliders setting a custom size unliking sides and configuring the value of sides separately resetting dimension settings comprehension questions how can padding and margin help you to improve the design of your site are padding and margin available in global styles transcript welcome to learn wordpress join me as we explore the difference between padding and margin padding and margin are two important properties and they essentially do the same thing they create extra space but the question is where well padding is what creates space inside a block and margin is what creates space around a block hopefully this visual depiction will make it more clear the margin adds space around the border of a block or element and padding creates space inside the block or element s boundary various dimension controls are built into different blocks to help you achieve greater customization for your layout and design especially when combined and padding and margin are two of these controls that we are talking about today you can find the dimension controls in the block settings sidebar under the label dimensions once you are able to see the dimension section you can click on the three vertical dots and select margin you will notice you also have the option to opt in for block spacing so these are additional dimension controls that you can explore some blocks have margin as optional but some might only allow you to change the padding please note a lot of work is being done to add additional controls to more blocks to provide extra flexibility so let s first look at padding settings as mentioned this setting impacts the space between a block s content and its border you can set the padding for all sides by using the slider in your sidebar settings from zero to double xl or you can set a custom size by dragging up and down below padding or using the available slider when you click on unlink sides you have the option to configure the value of each side separately you will notice now you can change the top or only the right or the bottom or only the left and when you click on the three vertical dots you have the option to reset all now let s take a closer look at margin the margin setting impacts the space around a block very important margin is usually used to add gaps between elements on a page so for example you can use the margin setting to add a gap between the group block and the heading block in this example as mentioned previously to change the margin setting we have to click on the three vertical dots and select margin and to change the margin consistently we also have the slider option from zero to double xl or we can set a custom size one difference you will notice when we change the margin setting is that we are only changing the top and the bottom when you click on unlink sides you once again have the option to configure separate values for the top and bottom margin let s use the slider options again for the top for the bottom and then if we click on the three vertical dots we can reset it again just one thing to note when you change the margin settings for a heading or a paragraph you will be able to change the margin for the top the left the bottom and the right let s finish off by looking at a few examples where we change the padding and the margin to improve the design in our first example we are going to change the padding to enlarge the space around the text in our buttons block and to do that we can of course use the slider in our sidebar settings but in this case i m going to change the values separately and set a custom size for each firstly i will change the unit of measurement to pixels and change the vertical value to 10 pixels and the horizontal value to 35 pixels and there you go before we look at our second example it is worth mentioning that when you add a block default styling is applied in the block editor but you can of course change this by altering the dimension settings i ve added two columns blocks to this page firstly i m going to add more space around the text and image in the top columns block by altering the padding settings so i ll make sure i select the parent block and then open up my sidebar settings then i will click on set custom size and change the padding to 60 pixels next i m going to add some more space between the two columns blocks so i ll click on the three vertical dots select margin and this time around i m going to use the slider and change the margin to extra large in the last example i ve added a cover block with some information and i m going to change the padding as the text is too far to the left so to do that i m going to select the parent block the cover block and then open the sidebar settings and drag the slider all the way to the right 100 pixels and now the information is much better positioned i trust you will now be able to use these settings more confidently and visit learn wordpress for more tutorials and training material workshop details length 7 mins language english subtitles english transcript view print view view join a live online workshop suggestions found a typo grammar error or outdated screenshot let us know this work is licensed under a creative commons attribution sharealike 4 0 international license presenters wes theron west7 i am an instructional designer for the wordpress open source project sponsored by automattic i am a strong supporter of the open source movement i have a background in education and content development i am a husband father dreamer and lifelong learner about news hosting donate support developers get involved learn showcase plugins themes patterns wordcamp wordpress tv buddypress bbpress wordpress com matt privacy public code wordpress org wordpress org visit our facebook page visit our twitter account visit our instagram account visit our linkedin account