HTML elements can be displayed either in block or inline style. The difference between these is one of the most basic things you need to know in order to use the editor effectively for styling. From the point of view of document structure, block-level elements are elements that may contain other elements, both block and inline in types.

When you press the Show Blocks toolbar button, JCK Editor will display a grid of dotted frames around the block elements of the document along with their HTML tag, like p for paragraph or blockquote as shown in the screen-shot below:

 This is used to help identity different block elements containers when applying styles to the article.

Block Examples

<p> tags and <div> tags are naturally displayed block-style. (I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.) A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Blockquote

The <blockquote> tag defines a long quotation. It also insert margins for the blockquote element.

Example:

Incredible Typography at your finger tips. Give it a try!

CSS Code:

blockquote {
    background: url("data:image/gif;base64,R0lGODlhUACgAMQAAPDw8OHh4fT09PHx8ejo6OPj4+Tk5OXl5e3t7fLy8uzs7O7u7ufn5+vr6+np6eDg4PX19QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABQAKAAAAX/ICSOZGmeaKqubOu+cCzPdG3feK7vfO//wKBweEMwEMRSgsAQ+ACFh3SRhAgI0seBd81KAwMiIuB9EHQLcvkBDiYOa+nZ1o1/nb6xXYqkDaJ7UgZ4OgIMgVl9MQqIXoM6f41ZADCGkl5zRZdZbS2Rm1mZNFigX2EraaVeCjQCcKqCLLBeVDICBrOxK7kFlDKfsw4ts00zA2qwAbWyqqwzAsiqBgkvpQG+trizBITDmwan2bkNMt/dMaSwijCXjzSMycsxkqIyALOdM431MQKA1uH0BTJw4xAsbDQGnotxTx2OPQEWxvgHitxDOwFnNIDFQIcdZzWgqSogUWCZLTc2/6pCeCMONTrRLvGzscaiDXigIvIoo/MGxUs2PWLCMQDWyx1l5NFwoArlTi85fkoKKlRKAaKwlObwcvUGTlDrqko5OgrWzJZenNLQtrLHmgMlvcV7yhMkjAS55MSdZ6dAWBYN8wYgQDZhIL8vAueV4mAvM0RwWyhezEZrNUn5Ukym/ECYyUYBCpvYzJmqC1BqT5DmzFLupYwlVlPuyHeT6RKc7ZRDvUJqbti7eKswmNtL6+DfVnwt/uC4ilJdU+BlPqn2pdQn2DJ3nqIUbRUIqEsB/hyU3RS+Be/eJPpEeOZny19/8So39+6b7iuJmQu7a0SevVAUZaF9NtAMeuSlH6Z+kDmWwjH4/HVZILdVQtw35J22xwEZMlQfIgWcZ6AgCrR3QwIKfMgVAZbNAMCLL3bIQwIwvuhgFTjmqOOOPPbo449ABinkkEQWaeSRSCap5JJMNunkk1BGKeWUVFZp5ZVYZqnlllx26eWXYIYp5phklmnmmWimqeaabLbp5ptwxinnnHTWaeedeOap55589unnn4AGKuighBZq6KGIJqrooow2umYIADs%3D") no-repeat scroll 0 0 #F5F5F5;
    border: 1px solid #E0E0E0;
    margin: 0 80px 18px 0;
    padding: 18px 20px 18px 80px;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 17px;
    font-style: italic;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display:block;
}

<hr> Horizontal Rule

The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an HTML page.

Example:

CSS Code:

hr{
    border-bottom: medium none;
    border-top: 1px dashed #CCCCCC;
    height: 1px;
    margin: 5px 20px;
    display: block;
}

Inline Examples

Inline-display elements don’t break the flow. They just fit in with the flow of the document. So here I’ve got a paragraph going on, and I’m going to add a <span> tag style to a text element.

Dropcap

The main paragraphs on this page start with a one-character span with dropcaps CSS.

Example:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

CSS code:

span.dropcap {
    color: #666666;
    float: left;
    font-family: georgia;
    font-size: 80px;
    margin: 0;
    padding: 24px 10px 16px 0;
    display: inline;
}

Highlight

The main paragraphs on this page start with a one-character span with highlight CSS.

Example:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

CSS code:

span.highlight {
    background: none repeat scroll 0 0 #AA1428;
    font-weight: bold;
    padding: 2px 5px;
    color:#FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline;
}