HTML Block and Inline Elements
Download as PPTX, PDF1 like2,103 views
HTML elements can be either block-level or inline. Block-level elements always start on a new line, take up the full width of their parent container, and allow for margins and padding. Inline elements do not start on a new line and only take up as much width as their content requires. Common block-level elements include <p>, <div>, <form>, and <ul> while inline elements include <a>, <span>, and <em>.
HTML Block and Inline Elements
- 1. HTML Elements Block & Non-Block (In-Line) Level Elements
- 2. Description • Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
- 3. Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). A block-level element is an HTML element that begins a new line on a Web page, and extends the full width of the available horizontal space of its parent element. Can have margins and/or padding If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned). By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
- 4. Example Block-level Elements <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.
- 5. Inline & Non-Block Elements An inline element does not start on a new line and only takes up as much width as necessary. Flows along with text content. Will ignore top and bottom margin settings, but will apply left and right margins, and any padding Will ignore the width and height properties If floated left or right, will automatically become a block-level element, subject to all block characteristics
- 6. Examples of Inline Elements: <a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.