Inline and Block Elements

Inline and
Block Elements

Basically, an inline element does not cause a line break (start on a new line) and does not take up the full width of a page, only the space bounded by its opening and closing tag. It is usually used within other HTML elements.

A block-level element always starts on a new line and takes up the full width of a page, from left to right. A block-level element can take up one line or multiple lines and has a line break before and after the element.

P.S.: As you can see, I had an inline element (the words "inline" and "element" are in a yellow box made by the <span> element) and the block-level element is represented by the heading (<h1>) element and the <div> element, which is being used as a container for the two paragraphs above.

One thing needs to be clear: Block-level elements CANNOT be used inside an inline element, but an inline element CAN be used inside a block-level element.

I also used some internal CSS just to kind of practice it based on codes I've seen -- I never studied CSS before -- and to give a little style to my codes. ;)

Inline and Block-level Elements