HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 19: Block, Inline, Inline-Block, and positioning part 1

We're at the point where you should be pretty comfortable in using HTML and CSS. And the more you code, the more you will naturally memorize things. Things that you use often will stick in your head. But know that even very experienced coders have to do a search every now and then. Especially for things that they aren't using all of the time. We need to learn a few more elements and some different ways of positioning before we start on our website. These concepts are a little confusing at first until you get some experience with them. So this will take some practice and experimenting. Don't stress to much if you don't fully understand everything we're gonna go over here. Think of the next few lessons as an introduction to positioning your web page content. And we won't be coding too much in these next few lessons. It's just very important that you understand these concepts. So let's get started.

Block Elements

We have been creating block elements throughout this book. And what that means is basically how the browser will read and display our content (elements). A block element is displayed by the browser from the left of the screen all the way to the right side. Except for the elements that we added a width property to. If we don't add any widths or positioning code to our elements the browser will display our content as block elements. This is called the natural flow. Remember the concept natural flow. It will be useful later when learning about positioning your content. The browser will read and render your code in a top down manner and display your elements one after another using the entire width of the window and will add some space by default in between the elements. A lot of website developer's use this type of system. If you run our learning page again that is full of block elements and re-size the browser window note how the elements stay on the same line and shrink to fit the window.

Inline-Elements

Inline elements are displayed side by side. An example of a few natural inline elements are images and spans. If you were to add a bunch of small images to your page. Say 100 pixels by 100 pixels. The browser would display the first image starting at the left of the screen. The second image would display to the right of the first image with a small space in between the two. Then the third, fourth, and so on. When it gets to the right side of the screen, If there is not enough room to fit the image it will display it on the next line and the cycle would begin again. One other thing to know here is that with the image inline elements that we just discussed, if we were to re-size the browser window from large to very small in width, The images that didn't have enough room to display in the smaller window would move down to the next line. This is referred to as a flexible, liquid, or responsive layout. And this type of system is fairly new but is becoming increasingly popular because of the capability of cell phones, tablets, etc. being able to view web pages on the internet. So the web page would be clearly visible on a tiny cell phone screen or a huge big screen. If you wanted your viewers to be able to view you website on their phone you would want to use a system like this. Because obviously a viewer wouldn't want to be constantly scrolling up, down, left, and right to see your page. A good way to remember the difference between a block and an inline element is a block element will take up the entire width of the screen where as an inline element will take up the space it needs and leave the extra room to the side of it for the next element.

When we start using block and inline elements your gonna notice some strange things going on with our margins. That is because a block element handles margins differently from a inline element. And really this is something that has to be adjusted at the time when your creating your content. You'll have to make some changes to the margin amounts to get the spacing that you want between the elements. To try to simplify what you will see happening with the margins, If you had two block elements with a margin of 20 pixels on the top and bottom, You might think that you would have a space of 40 pixels between the two. But that's not the case with a block element. It will kind of split the 40 pixels in half. On the other hand an inline element will add the two margins. So there would be a bigger margin space. This really isn't that important at this time. Like I said it kind of has to be dealt with as your creating your page. You can plan out your site as much as you want but their will always be some alterations that you'll have to make to get the exact results that you want. You should also know that we will be able to convert inline elements to block elements, and the other way around to fit our needs. One example would be that we convert an inline to a block for centering purposes. The reason for this is because you can't center an inline element. This will all become more clear when we're developing our responsive website.

Inline-Block Elements

The inline-block element. Some coders consider this useful and some consider it complicated and tricky. We aren't going to use this property in this book but we should discuss it. The most common use of displaying elements inline-block is to fix an issue that coders will have when their page is viewed in Internet Explorer 6. And the issue is margins, Similar to things we discussed above. Even though I.E.6 is a very old version of the browser, there are still some people out there that haven't updated their browsers in a long time and are still using internet explorer 6 so web developers will kind of try to trick the I.E. 6 browser into displaying something inline-block but hide it from all of the other browsers that people might be using. Basically something that is displayed inline-block is a mix between both inline and block as the name suggests. It's a little bit inline and little bit block. Using it in certain cases might give you good or bad results. If you wanted to learn more about this element you could do a little research on it to see some sample web pages that people have created with the display:inline-block; property and value being used. And what it would look like using just inline or just block. Any issue with a margin that might come up for you shouldn't be too difficult to fix using the first two systems. If anything you might have to play around with the margin values in CSS to get the result you want.

Quiz Chapter 19

1.How is a block element displayed?

2.How is a inline element displayed?

3.What happens when you re-size your browser screen with block elements?

4.What happens when you re-size your browser screen with a bunch of inline elements on the same line?