i dont understand why a tag should be displayed inline opposed to block

The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

i dont understand why a tag should be displayed inline opposed to block

Hello,

I been wondering why one would want to change the display from inline to block level on some tags.

Refering to this code: The div is as default a block level tag, why would we need to change it to inline. Apparently inline means flow within the line. I need some better examples than this one to really understand it.

Hi. Next time, post code in [ code ] and [/ code ] without the spaces.

Anyway, Block level elements can contain other block level elements and other inline elemenets. Inline elements can contain other inline elements but not other block elements. However, that is all to do with the HTML. If by html an element is defined by block or inline, it must follow those rules.

And for your question as to why people may want to change this. The main reason is to make elements display next to eachother (when setting display to inline) or below and above one another (when setting display to block.

For example, one might have a set of links, which is marked up in an <ul> and <li>'s. <li>'s are by default a block level element. So if a person wants them to display next to eachother, they would have to give them a display of inline.

Inline vs Block - the rematch

You've almost got it. Inline/block is all about document flow. In the simplest terms, a block element will force a line break before and after it. An inline element won't - other elements can sit right next to it. That is how HTML/CSS was intended.

Yes, a block element will take up the width of it's parent element. And yes, a block element can contain inline elements. Block elements can even contain other block elements (like a div within a div) - though it should be avoided if possible. The one thing you're misunderstanding is that inline elements can contain other inline elements. How else would you be able to make an image into a link? Both the <a> and <img> tags are inline elements by default. So, when you have a line like this:

<a href="page2.html"><img src="some_image.jpg" /></a>

That is an example of nested inline elements.

So, you want to know why someone would want to change the display property from inline to block, or vice versa. There are a wide range of reasons, it really depends on the situation. I'll give you two examples:

Going block -> inline

Let's say you want to make a menu that runs horizontally across the top of the page. Your menu could be written out as an unordered list:

They would all display sitting right next to each other, because as a default, the <img> tag is an inline element. However, if you have this css:

#portfolio img {
display: block;
margin-bottom: 20px;
}

The would appear on top of one another (with a 20 pixel margin), which is a much nicer effect for a portfolio.

So it's all about the effect that you're after with your web pages. You just have to get used to which elements are by default inline, and which are block, and recognize when you would want to change that.

This division is grammatical and syntactical and cannot be changed by an author or web designer.

Block and Inline CSS Boxes
CSS renders boxes: rectangular areas. There are block boxes and inline boxes, and they differ considerably in how they are laid out. The built-in user agent style sheet in a browser specifies rules for how each HTML element type should render. Very simplified, block-level HTML elements generate block boxes and inline HTML elements generate inline boxes.

A designer can change the type of box that is generated for a particular element, using the display property. This only changes the rendered box and the way it is laid out. It doesn't alter the grammar rules of HTML or affect the element itself in any way. Setting display:block for an em element doesn't allow us to nest a h1 inside it.

Here's another example (yes, the select/option and textarea elements should have labels associated with them, but I never got around to it) which also proves that you don't need tables to lay out a form (oh and folks, don't get me started on the "X"HTML or my use of the universal selector in forms - that's not for this thread; afterall, this is just an example, and besides, I have my own CSS reset that plays nice with forms anyway and will be used when I next update this example anyway).

I've never done a table-based layout. Tables are actually my weak point. Some day, I'll have to make a table and I'll be digging through the books again : ) But I have made about 4 forms now, using mostly Ian Lloyd's versions (except with names AND ids on everything).

I do sometimes have an issue with the div groupings around every label-input pair. I have one site where the div is actually around every label AND every input-- I hate it, it just looks wrong. But it's even in my books (SitePoint books). It just seems that that really is adding extra html for really, presentational purposes.