Video Summary

All right in this section, we’re going to cover the display inline and display block property set values. So what we’re going to look we’re looking at here is we have an ordered list and I just put in options one options, two options. Three options for and we’re, if you remember from the slides is that the display block setting is the standard default setting. So that way, each list will end up going onto its own line. So we have, you know, one being option one to beat option two and so on. So if we come over here to and I do want to say too, is I just put in the I targeted the ordered list and I put a padding left as 100 pixels, because if I do take this off and I use the comment section, it was just right next to the end of the screen, and I just wanted it to be a little bit more visually appealing. So if you’re wondering what’s happening down here, that’s the reason why. So we’re gonna go to display and we’re going to put in block nothing happens because that’s the default version of that. And but what happens if we put this as in line

what now what happens is, is that each one of these lists is now on the same line. So each one will be right next to each other and what’s happening now is the you end up you end up losing the the numbers from the ordered less when you put it in the in line, which is fine. We’re more or less using this for the example because I think that the ordered list was a great way to see that the know that if you’re thinking about if you’re thinking about an ordered list, that it would you would want it to stack on top of each other, right? I mean, if you’re thinking about how you outline a paper or outline anything, right using bullets or numbered bullets, this is how it’s set up. But if you want to set it up as an inline, you can do it by just using this display property. And what I don’t like about this right now is that the the it’s they’re too close to each other so you know what we’re going to use the padding and we’re going to do 20 pixels.

And I need to put a colon here for it to work and we’ll put in a parenthesis. Now we get to see it a little bit.

A little bit easier. Now right now they’re spaced out. So this is what we can use for to really manipulate how we want to layer these individual objects. Now personally, you will probably not run into a scenario where you’re having to not only type out a bunch of HTML code and then put that as a as an inline because when we’re in WordPress, a lot of these page builders allow us to set up the columns and everything that we want really easily. But you might run into a situation where you want to change something from an inline to a block and vice versa. And this is how we’re going to do this. And just for the sake of this example, let’s just copy all of these lines and what happens when we have options that reach the third go past the end of the page. So let’s copy this, come down here and we’ll hit enter.

And this one, this one just got pushed out over here. It works the same. It’s the same thing all just kind of cut this out just for the example. But when we structure our code is so it makes it easier to read. You can have you can essentially have as many as you want it on the side over here. Right? You could do it like that, but it just makes it hard to read versus if it’s just simple. You know, straight up forward like this. Mix A Lot. It makes it easier for everyone to set it up like this. But but as you see, going back to the example, as as we get more options when it hits it goes through the whole thing 1234 And then it goes 1234 And since we had that little glitch, it jumped to 234 but the idea is that once the wrist end of the page, it goes down to the second line. And basically everything’s in line for as long as it can until that lines, that line ends and then it goes to the second line. So it’s pretty straightforward. And line is a pretty powerful tool to use. But we’re going to let the WordPress and the main developers leverage those type of things. And if we need to go in and change this in any way, shape, or form, this is how we can set this up. So let’s go on to the last most important display setting and that’s display none and we’re going to cover why that’s such an important tool for us as WordPress developers.