If you want to control the size of the content box of a block element, you can use the "width" and "height" properties as shown below:
* {width: 300px} - Specifies the content box to be 300px wide.
* {height: 200px} - Specifies the content box to be 200px high.
The HTML and CSS document below shows you a good example of how to specify content box size of on a <P> tag:
A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
If "float: right" is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
Below is a good example of a floating block element and a floating inline element:
An inline element is formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. Examples of inline elements are:
► <IMG> - A tag to insert an image into the current line.
► <STRONG> - A tag to make the text stronger.
► <EM> - A tag to emphasize the text
► <INPUT> - A tag to allow user entering input data to a form.
► <SPAN> - A container to group inline elements into a unit.
► <A> - A tag to create a hyper link.
► <BR> - A tag to break the current line.
A block element is formatted as a rectangular block occupying the entire width of the parent content box. Examples of block elements are:
► <P> - A paragraph of text and/or inline elements.
► <PRE> - A paragraph of text with white spaces preserved.
► <LI> - A list item. Identical to <P; except that it has list-item marker on the left.
► <TABLE> - A table of cells. Each cell is identical to <P>
► <FORM> - An input form. Identical to <P> except that it has no margins.
► <DIV> - A container to group elements into a block element.
► <H1/H2/H3...> - A title line. Identical to <P> except that it has different margins and font size
► <HR> - A horizontal ruler.
From a formatting behavior point of view, HTML elements can be divided into 2 categories:
► Block Element - Formatted as a rectangular block occupying the entire width of the parent content box. For example, <P> is block element.
► Inline Element - Formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. For example, <IMG> is an inline element.
Webmaster 20th of May 2012
Tell us what you feel about Basic and Advance CSS Examples and Concepts Interview Questions and Answers
All comments will be published after review. No login or registration is required to post a comment on Basic and Advance CSS Examples and Concepts Interview Questions and Answers We offer and invite you to submit your valuable comment now; Please be respectful of others when commenting. Insulting others, self-promotional comments, website promotional comments, marketing stuff, SEO Techniques, SMS-style content and off-topic comments will not be approved at this information portal.
So start sharing your thoughts regarding Basic and Advance CSS Examples and Concepts Interview Questions and Answers
Thank you.