Display

Transcript

Getting content in the right place in your mockup is pretty easy. But doing the same thing on a webpage can get weird. So I'll need to show you how display works.

Display is a CSS property that tells the browser how much space a tag takes up. To explain display, I'm going to use my previous project as an example so that I can highlight a couple of its sections and compare them. Check out the content at the very top of the page. I have a rank one heading and a paragraph right below it.

Notice how the content is stacked on top of each other. In another part of my page, I have a paragraph with some text that uses the insert and delete tags. The content in the insert and delete tags appears side by side. This is because some tags have a display property of block by default, and others have display property of inline by default. A tag that displays block follows two simple rules, it takes up

100% of the width of its parent, and its height is determined by its content. Let's look at an example of display block. I have a heading rank one and a paragraph in an HTML file.

Since the h1 doesn't have a parent, it takes up 100% of the width of the page. I can confirm this by inspecting the h1 in the browser. See how the blue content box spans the entire width of the page. The paragraph text is added to the line below the heading because the heading takes up 100% of the width. So there's no room for the paragraph text. What happens if I put my paragraph and my heading inside of body tags, body tags also display block. This means the body tags will take up 100% of the width of the page. The body is also now the parent of the h1 and the paragraph, which makes the h1 and the paragraph the contents of the body. Adding the height of the paragraph and the heading together gives me the height of the body.

The width of the paragraph and the heading rank one is still 100% of the page, because a block tag takes up 100% of the width of its parent. tags that display inline are a little different. I'll add the insert tag to show you what I mean. See how its width and height are both determined by the size of its content. It's as wide as its text and as tall as its text.

This is why the content of two inline tags like insert and delete can sit on the same line. Let's recap. In a block display the tag takes up 100% of the width of its parent and its height is determined by the content. A tag with the inline display property gets its height and width from its content. Next, we'll talk about changing the width of content. But please remember, understanding how display works is absolutely critical to layout if you want to position your content wherever you want. If you don't understand display, you will very quickly get lost in the web.