By default, certain elements have certain display methods, all of these however we can override with CSS. The main three are:
Block: Examples of default block elements include <div>, <p>, <h1-5>. When a block level element is written, by default it will take up a certain amount of extra space, it may also have default margin and padding applied to it. It will move any following content to the next line.
Inline: Examples of inline elements include <span>, <a>, or <strong>. These will not move the following content and are usually used to apply an effect or function to content.
None: This will allow content to be inside your code but will not display when someone views your website.
Let’s take a look first at some block level elements. Create a new page with your default code for a page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Display Types</title>
</head>
<body>
</body>
</html>
Now inside the body tags, let’s write some block level elements:
<div>A div is a block element</div>
<h1>So is an H1 tag</h1>
<p>And a paragraph. You should notice the H1 tag and I have default margin and padding set as well, moving away from the other elements</p>
When you view your page you should see each line of content takes up a new line. You should also see that the “h1” and “p” have a certain amount of top and bottom margin. This is important to note so you are aware to specify margin and padding for all of your elements.
To illustrate the amount of space each element takes up, let’s apply a simple snippet of CSS to see each element separately. Add this in the <head> tag to give each element a background color.
<style>
div{
background-color:#CCC;
}
h1{
background-color:#CCC;
}
p{
background-color:#CCC;
}
</style>
When you view your page you can see now the margin and padding of each element.
Now let’s add some inline elements. After your “p” element, add the following:
<span>A span is an inline element</span>
<a href="http://www.google.com">So is the anchor tag</a>
<strong>And the strong tag</strong>
Then add the following styles to let us see the space taken up by the inline elements:
span, a, strong{
background-color:#EEE;
}
Notice with the comma, we are able to apply styles to multiple elements at once. This is a handy shortcut to keep in mind.
Now view your page, you will see that the new elements only take up the space with the content contained within that element. All of the elements butt up together.
A <span> is a container like a <div> however it is an inline element. The tag is useful for wrapping text and applying a specific style to a portion of content.
Any elements default display type can be changed with CSS. Add the following span tag with a class we will target to change its style:
<span>We can also use CSS to change an inline element to block or block to inline</span>
Now in your CSS add the following class style:
.blocklevel{
display:block;
}
Test out your page and you will see the span tag now acts like a block level element. We were able to change this by modifying the display property and changing the value to “block“.
Finally, let’s take a look at the “none” value. Add a new div in your content:
<div>We can hide an element by changing the display to "none"</div>
And the styles for the class:
.dontshow{
display:none;
}
When you test the page out you should not see the content that is in the div. This is useful for advanced techniques we will be looking at in the future.
