• Home
• CSS Overflow Example
• Block Elements
• Button Generators
• Color Codes
• Levels
• Menus
• About CSS Stylesheets

• Background Images
• Positioning
• CSS templates

CSS Block Elements

A person that is working with CSS code will need to learn the difference between inline CSS and the block elements that can be used to display certain parts of a web page or other HTML content. There are essentially three main display property types for CSS code, with only two of these being visible. The not displayed types remains hidden and only adds meta information to the overall project. However, the inline and CSS block elements are displayed, but each in a different way.

Block elements are simpler than their inline counterparts. Basically, they will take the whole width of the web page and will have a line space before and after the element. In contrast, the inline CSS will only use the amount of space that is needed to properly display the element and will not have extra line spacing. The correct code for CSS style sheets to show a block display property are either the or commands. The command returns a normal box and is the basic form of CSS block elements. However, there are also additional codes that can be used for natural block formats, such as the , , and commands.

The main use of block elements in CSS style sheets is to make a simple design that can be easily translated with any web browser or other program that can read HTML code. With inline CSS elements, the rendering could be different from program to program as it changes the size of the elements and the space needed to display them. In addition, a text box for a long piece of text would be another instance where the CSS block elements would make more sense. The space before and after would separate the text element and make it stand out on a web page or other HTML project.