June 25, 2016

Block And Inline

Positioning: Block and Inline

By this point in the series, you should have a pretty good idea of how to style HTML elements with CSS. We have covered most of the basics. Now, we’re going to start working with positioning. There are quite a few ways to position your HTML elements, but before we get into that; we need to discuss block and inline elements. As you already know; the browser will display an element as block, by default. A block element will take up the entire width of the browser screen. This is true in most cases. Some examples of elements that are not displayed as block by default are img(image), a(anchor tag) and even the span element that we’ve been working with recently. To clearly show you the difference between block and inline, let’s work with some examples using the WEBSITE FOLDER SETUP that we created in the previous lesson. See the first example below.

Block Elements Example

block and inline: block html code

block and inline: block css code

block example display

In the first example above, we have a few HTML elements that are being displayed in block format. This is the default format for the elements that are being used in the example. We’ve been working with block elements throughout this entire CSS tutorial series, so this shouldn’t be anything new to you. Later in this lesson, we’re going to see what happens to both block and inline elements when the browser screen is resized. Resizing the browser screen can give us an idea of what our web page would look like on a device with a smaller screen size like a tablet or a phone. In our external style sheet(CSS code), we have added a blue background and a border that is 2 pixels, solid, black for all of the block elements. Notice how these elements take up the entire width of the browser window. This is how a block element will display without a width property specified. Block elements do not display side by side. Some of the elements in the example above are nested inside of other elements. For example, the h1 and first p element are nested inside of the div with a class of div1. I gave a few types of examples to show you some different ways that block elements can be displayed. See the next set of images for some examples of elements that are displayed inline. Some of the best and most unique websites are built from web designers testing out many different types of element layouts and nesting elements inside of nested elements until they create something one of a kind and beautiful. Wow, that’s a mouthful of elements, but I think you get the point.

Inline Elements Example

inline example HTML

inline example CSS

inline example display

Our second example shows some spans and images that are displayed as inline elements. The same image was used 8 times. Inline is the default format for both a span and an image. In the HTML code, we’ve added 4 spans and 8 images. Right in the middle of them, we have another p element displaying in block format. The span has a class named “my-span” that has a few style declarations in our CSS code. Also, the image that I used is about 120px by 120px and was created in GIMP 2. You can simply create a square colored box in a free photo editor that is very close to this size for this exercise. GIMP 2 is a free photo editor similar to Photoshop that I use often. You can check out GIMP 2 HERE. The image is named “inlineimage.png” and is saved in the “my-images” folder. Our img element has a class named “img-class” that just creates a 2 pixel, solid red border. The class names that are used in this lesson are only for learning purposes and wouldn’t be the most appropriate in a complete website design. The important things to notice here with our inline spans and images are that they display side by side as long as there is enough room(You’ll see an example later in this lesson), and there is a default margin on the left and right sides. Inline elements don’t have any margin space by default on the top and bottom. Any space that you see in our inline element areas is coming from the block elements that are next to them. You should also take notice, that where the borders of our span elements and div with a class of div2 meet has no margin space. This happened because we gave our div2 a background color and a border in our CSS. In your HTML code, if you delete the class=”div2″ from the opening <div> tag to make it a normal div element without any CSS, save it and refresh or run the page again, you will see margin space on the top and bottom again. It is coming from the block elements. You’ll come across these little nuances every now and then in web design. Playing around with code is an important step in getting everything exactly the way you want it.

The final examples are going to be shown in a video without sound. I’m currently looking into screen recording software that has good audio settings. The audio with the free software I use now makes my BLUE SNOWBALL microphone sound very distorted, which is why I made the video without sound for now. We are going to see how our block and inline elements are affected when the browser window is resized. This will also give you an idea of how the web page will look on a cell phone or tablet screen. Building “responsive” websites(websites that are built to look good on many screen sizes) is extremely important nowadays. Search engines are even penalizing sites that aren’t responsive. The work we’re doing in this lesson isn’t exactly “building a responsive website“, but some of the techniques we are using; like resizing the browser window to see how the elements respond are important steps to take when testing the “responsiveness” of a web page. This is something that you’ll learn down the road in web design, but it is important to bring up now so that you understand it. In the video, we will also add some declarations to our span class rule and our image class rule to convert these inline elements to block. Converting inline to block is probably the most common, but you can also convert block to inline, and either block or inline to what is called “inline-block“. Inline-block is kind of a mix between inline and block as the name suggests, but we’ll work with that in the next lesson. The declaration that we use to convert inline to block is “display: block;“. You will see this in the video.

 

 

 

 

That’s it for this lesson. We’ll cover inline-block in the next tutorial. Thanks for reading, I’ll see ya next time.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>Block and Inline</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
<div class="div1">
<h1>The heading is a block element</h1>
<p>This paragraph is a block element.</p>
</div>
<p>This paragraph is a block element.</p><div class="div2">
<p>This paragraph is a block element.</p>
<p>This paragraph is a block element.</p>
</div>
<span class="my-span">Spans are inline by default.</span>
<span class="my-span">Spans are inline by default.</span>
<span class="my-span">Spans are inline by default.</span>
<span class="my-span">Spans are inline by default.</span>
<p>Another paragraph that is a block element by default.</p>
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
<img class="img-class" src="my-images/inlineimage.png">
</body>
</html>

my-styles.css Source Code


.div1{
background-color: blue;
border: 2px solid black;
}
h1{
background-color: green;
border: 2px solid black;
}
p{
background-color: green;
border: 2px solid black;
}
.div2{
background-color: blue;
border: 2px solid black;
}
.my-span{
background-color: gray;
border: 2px solid red;
font-size: 25px;
display: block;
}
.img-class{
border: 2px solid red;
display: block;
}

Clear Coded Programming

Please Leave a comment