html inline block code example

Example 1: html inline elements

Inline elements in HTML:

1	<a>			    The <a> tag defines a hyperlink, which is used to link from one page to another.
2	<abbr>			The <abbr> tag defines an abbreviation or an acronym, like "HTML", "Mr.", "Dec.", "ASAP", "ATM".
3	<acronym>		The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead.
4	<b>			    The <b> tag specifies bold text without any extra importance.
5	<bdo>			The <bdo> tag is used to override the current text direction.
6	<big>			The <big> tag defines bigger text.
7	<br>			The <br> tag inserts a single line break.
8	<button>		The <button> tag defines a clickable button.
9	<cite>			The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.).
10	<code>			The <code> tag is a phrase tag. It defines a piece of computer code.
11	<dfn>			The <dfn> tag represents the defining instance of a term in HTML.
12	<em>			The <em> tag is a phrase tag. It renders as emphasized text.
13	<i>			    The <i> tag defines a part of text in an alternate voice or mood. The content of the <i> tag is usually displayed in italic.
14	<img>			The <img> tag defines an image in an HTML page.
15	<input>			The <input> tag specifies an input field where the user can enter data.
16	<kbd>			The <kbd> tag is a phrase tag. It defines keyboard input.
17	<label>			The <label> tag defines a label for several elements
18	<map>			The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
19	<object>		The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
20	<output>		The <output> tag represents the result of a calculation (like one performed by a script).
21	<q>			    The <q> tag defines a short quotation.
22	<samp>			The <samp> tag is a phrase tag. It defines sample output from a computer program.
23	<script>		The <script> tag is used to define a client-side script (JavaScript).
24	<select>		The <select> element is used to create a drop-down list.
25	<small>			The <small> tag defines smaller text (and other side comments).
26	<span>			The <span> tag is used to group inline-elements in a document.
27	<strong>		The <strong> tag is a phrase tag. It defines important text.
28	<sub>			The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
29	<sup>			The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].
30	<textarea>		The <textarea> tag defines a multi-line text input control.
31	<time>			The <time> tag defines a human-readable date/time.
32	<tt>			The <tt> tag defines teletype text.
33	<var>			The <var> tag is a phrase tag. It defines a variable.

Example 2: make div tag inline

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

Example 3: css block position

/******************* BASIC BLOCK POSITIONING **********************/

/******************** Static Position  *************************/
/*All elements are static in their position by default. Which means 
that, all elements are organized just like they would if your code 
didn't have any CSS and were just pure HTML */

tag_name {
  position: static;
}

/******************** Relative Position *************************/
/*It allow us to position this element relative to how it would have
been positioned had it been static. You can use the coordinate 
properties to guide this element (by giving some margins to the block), 
relative to what was the standard layout. This new position will not 
influence the distribution of other elements (the others will keep 
the standard layout, as if your element leaves a "shadow" of where it 
was supposed to be). Therefore, some overlaps and lack of coordination 
can occur when you move your element*/

tag_name {
  position: relative;
  left: 30px;
  right: 10px;
  bottom: 2px;
  top: 4px;
  
  z-index: 1;  /* It decides which element will show on top of the 
                  other. The first to show, is the one with the 
                  greatest index */
}

/******************** Absolute Position *************************/
/* With this property, we are able to position the element relative 
to the <body> or relative to it's parent, IF the parent is itself isn't 
"static". Using the coordination properties, we do not increase or 
decrease the margins in relation to the standard position, but rather, 
we are increasing or decreasing the distance in relation to the "walls" 
of the block that contains this element, for example, a parent <div> 
that contains a <h1> element. The name "absolut", comes from the cases 
where the parent is the <body> element. When you use this property, 
you are taking the element away from the natural flow of your document, 
so, the other elements position will not take into account your absolute 
element*/

tag_name {
  position: absolute;
  left: 30px;
  right: 10px;
  bottom: 2px;
  top: 4px;  
  
  z-index: 1;  /* It decides which element will show on top of the 
                  other. The first to show, is the one with the 
                  greatest index */
}

/* For exemple: */

div{
  position: relative;
}

h1 {
  position: absolute;      /* In relation to the div element*/
  left: 30px;
  top: 4px;
}

/******************** Fixed Position *************************/
/*As soon as the element is fixed in a certain position, relative 
to it's parent, then, whenever we scroll down the webpage, the element 
maintains its fixed position on the screen. This property will also 
make the other html elements, ignore the position of this element 
during their layout (it takes it away from the natural flow of the 
document). */

tag_name {
  position: fixed;
  left: 30px;
  right: 10px;
  bottom: 2px;
  top: 4px;
  
  z-index: 2;  /* It decides which element will show on top of the 
                  other. The first to show, is the one with the 
                  greatest index */
}

/******************** Sticky Position *************************/
/* This property will stick the element to the screen when you 
reach its scroll position */

tag_name {
  position: -webkit-sticky;   /* For Safari */
  position: sticky;
  left: 20px;
  right: 60px;
  bottom: 5px;
  top: 13px;
  
}

/******************* NOTES ABOUT THE Z-INDEX **********************/
/* By default, the z-index of an element is zero, so if you change the 
z-index to something above or below that value, you are putting that 
element above or below the ones you didn't change.
Another important thing to be aware of is that the z-index only worked 
for elements that have a position different from the standard. This 
means that, for elements with Static position, this won't work.
So, you can only make two elements interact in the z plane if they both 
have a define position as: Relative, Absolute, Fixed, ... */

tag_name_1 {
  position: absolute;
  z-index: -1;
  
}

tag_name_2 {
  position: relative;      /* tag_name_1 will be below the tag_name_2 */
}

Example 4: set items inline html

display:inline;

Example 5: what does display inline-block do?

/*Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.

Compared to display: block, the major difference is that
display: inline-block does not add a line-break after the element,
so the element can sit next to other elements.

The following example shows the different behavior of
display: inline, display: inline-block and display: block: */


span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Example 6: inline-block

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. Its inline but we can add width height etc