2.3 Margin, Padding, and Border

[MUSIC] Welcome back to the course. In this lesson, you're gonna learn how to use the margin, padding, and border properties as logical. Let's go. I made another typical layout for you here. This is a typical card layout, right, where you have the card itself. Here, we're using a thick border on the left or on the starting point of the card. Then an avatar, some meta information, a title, and a piece of text, right? So this is written in English. And here, to demonstrate an RTL layout, I'm using again Arabic, and again, my apologies if this text is not translated correctly. Now, right off the bat we can see a couple of problems with the RTL text. First, the border should be at the start of the inline dimension, which in this case is on the right side. Now it's on the left. The gap here between the image and the edge of the card is too big. There is no gap between the image and the text itself. So a couple of problems. Let's go ahead and fix them. First, we'll scroll down to the card itself. And we'll work on the padding and the border. So right now because I'm using physical properties, I'm setting the padding using the shorthand notation here, so padding 2rem 4, 2, and 2. This equals to 2rem on the top, right, bottom, left. Now unfortunately, we cannot use this CSS shorthand when we're working with logical properties, and instead we have to write them one by one. So we're gonna comment that and we're gonna say the following, padding-top: 2rem. We can also do block-start instead of top. And it's gonna work just the same but we're not working with vertical languages here, so I can actually get away with using padding-top instead of having block-start. The next value is the right side. That equals to padding-inline. And I'm gonna set that to 4rems, okay? So that sets a padding on the right side on the LTR layout and on the left side on the RTL layout. That's cool. Bottom, we'll just say padding-bottom: 2rems, and padding-inline-start instead of padding-left, again 2rems, okay? So that correctly creates padding-left 2rems here, and padding-right 2rems here, or padding on the right side. What about this border? Well, instead of saying border-left, we'll actually say border-inline-start, same values, 8pixels solid, fd622b. So that correctly creates the border on the left side for the English layout, and on the right side for the Arabic layout. Cool, cool, see how start and end are now part of the property name instead of values. That's why I said it really depends. The syntax really depends on the property that you're using. Sometimes start and end are used as values, sometimes they are actually part of the property name. All right, let's move on. There's one other fix we have to make here, and that is on the image. See that we're using margin-right to set a gap between the image and the text. Well, that doesn't work for the Arabic layout. So instead of margin-right, we're gonna say margin-inline because we're working horizontally. And instead of right, we're gonna use end, and it's gonna be 1.5rems. So that automatically creates the correct margin direction on both layouts. It creates the margin on the right on the English layout, it creates the margin on the left for the Arabic layout. Now, if we hadn't done these changes, so if we hadn't used logical properties, we would have to write a lot more CSS. To be more specific, we would have to write the CSS. So, we would need to target the card, change the padding, change the border to right, and set the border-left to none. And also on the image, we would now set the margin-left to 1.5rems, and set the margin-right to 0. So we will need to write more CSS just for a simple card element like this, but with logical properties, it's really very simple. Instead of using the physical properties like top, bottom, left, right, we're using logical ones like inline-end, inline-start, and so on. All right, and that's how we can use margin, padding, and border as logical properties. Now, let's talk about the next properties on our list, which are width and height. So in the next lesson, we're gonna take a look at how we can use these as logical. I'll see you there.