This is an interesting bug. This card is breaking out of its container. It would be better if it is not walking out of the screen. This element not even close to fitting in it’s container. Let’s see what the issue is… The width is 100%, that’s ok… Ohw… And it has a fat border and a nice padding… This might give some scaling issues…
In the previous style-facts we learned how to position elements and how to display them. Today we are going to learn how to shape the block or text we positioned last time. In this blog we will cover ‘width’, ‘height’, ‘margin’ and ‘padding’. We will touch the topic of borders because of the width calculation, but the deep-dive on borders will be done in another sequel of this blog series. With the explanation in this blog you will be able to fit element into each other, without elements breaking out of their container (example pictures can be found in the width and height topic.) They will be able to scale nicely, and you will be able to combine several metrics like ‘px’ (pixel), ‘rem’ (root em), ‘%’ (percentage) and even ‘vh/vw’ (viewport height/width).
The attributes ‘width’, ‘height’, ‘padding’ and ‘border’ are part of the block, ‘margin’ is not. Think of it like a carton box. The carton itself will be the border, which has a thickness. The width is the space inside the box you can fit other boxes or objects into. Padding will be the packing material to protect what is inside the box. Margin does not define how big the box is. It’s more like the size you will need to keep around the box to protect it when vulnerable materials are inside the box. Let’s see how we can define margin and padding first.
Margin and units
Margin is the space outside of the box. You can use it to keep elements at a distance from your block/element. Margin like most attributes can be defined in several units. Pixel is one of the most conventional ways, but with all the evolving styles of design other metric units are becoming more popular. Percentages (%) for instance. This is a percentage of the screen or parent container.
But there are newer units to define a certain size. One of these is ‘em‘ . ‘em‘ is the font-size of the document you are working in. So, if the body of your site has a font-size of 12px, ‘em‘ is 12px. 2em is 24px, 3em is 36px, etc. This metric was first used for responsive design, because of its dynamic scaling options for text and size. Condemned a bit too dynamic the ‘rem’, which means ‘Root em‘ is taking its place. ‘rem’ is the default ‘em‘ value for all browsers and is ’16px‘.
Last but not least are 2 units that you may not have seen before: ‘vh‘ and ‘vw‘. These are used to define the size according to the percentage of the viewport height and viewport width. For example, if a view has a screen of 1280px wide and views your site at full width, 10vw would be 10% of 1280px = 128px. Same system goes for the ‘vh‘-unit. Now that we got the metrics down, we can start with margin.
Margin can be defined for 4 sides: left, right, top and bottom. You can see this in the image above in transparent red. This will give the options to define margin-left, margin-right, margin-top and margin-bottom separately. As you can see, this is a lot of typing that can be shorthanded into ‘margin: [top value] [right value] [bottom value] [left value]’. This is always clockwise. If you want to make the top and bottom value the same and the side value the same, you can specify this with ‘margin: [top/bottom value] [left/right value]’. If all margins are the same that would be ‘margin: [value]’. Margin: 12px, for example. Margin has another neat trick up its sleeve to let you center an element in the exact center of the screen. This is the value ‘auto’. When applied like ‘margin: 10px auto’, it will center your object in the horizontal center. This cannot be done vertical with margin: auto.
Padding can be defined in the same way as margin as shown in the image below in transparent blue. So padding-left , -right, -top and -bottom can be defined separate and in shorthand. What padding cannot do is define left and right padding with ‘auto’ to center its contents. You can do this with ‘text-align: center’ instead. Another thing you cannot do with padding is use negative values. While you should not do this defining margins it can be done. Please remember that padding is part of the size of your block. Using a padding while your blocks width is 100% will break your design.
The width of your block/element can be defined static or dynamic. Examples of static values are ‘px’ and ‘rem’, If you want to size you block according to the width of the container, you can specify it in percentages. This will size your block to 10, 20 or 50% of its container, for example. If you want to size it according to your defined font-size, you can use ‘em’.
I explained that using a padding when the width is 100% is not working, it will break your design. It will look like the example below. What to use then? This is where calc() comes in. calc() will let you combine percentages and other units to calculate exact spaces/distances. When you do want to use padding in a 100% width sizing block, you can specify is as: ‘width: calc(100% – 2rem); padding: 1rem;’. In this case both left and right padding are subtracted from 100% to make the box fit into a 100% space of the container. If you have a border around your box of 2px do not forget to a little extra to the rem you are subtracting. In this case: 2 x 2px = 4px, 4px / 16px = .25rem.
Defining the height is like defining the width. It has a similar addition of padding although it is less of an issue with height (image below). We are used to scrolling down a page. Scrolling to the sides not default for us humans… Fancy paralax stories excluded… What we do want is a nicely fixed and stretched menu.
In conventional dynamic and static metrics this is pretty hard to do. Some smart person invented ‘vh‘ and ‘vw‘ for this issue. ‘vh‘ stands for viewport height and it lets you size a block by taking a percentage of the viewport height. 50vh is half of your screen viewport height. This is not the total page height. Only the part you see on the screen. As you can imagine, this is very handy to calculate how high your menu should be to fill a left or right side of the screen. Calculating this menu height can be done with ‘height: calc(100vh – 4rem); padding: 2rem 1rem;’ for instance.
You now know how to shape boxes inside and out by combining padding width and height. You also know that you will have to subtract the space you use for paddings and borders to make a block fit in a certain container without overflowing. The right way of applying margin and padding is shown in the last image. Counting to a 100% is key. If you use ‘inline-blocks’ your margin will be added to this equation. You can find the CodePen for this blog here. The next blog will be about selecting your object so you can apply styles like an artist. Untill then: Be aware of your surroundings (margin), rise to great ‘height’-s and may the force be ‘width’ you, my young ‘padding’-wan.