Display types: Block and Inline By Virginia Arkelian The 3 ways - - PowerPoint PPT Presentation
Display types: Block and Inline By Virginia Arkelian The 3 ways that HTML elements can be displayed 1-Block Takes up the full width available, with a new line before and after. {display:block;} 2-Inline Takes up only as much width as it
By Virginia Arkelian
The 3 ways that HTML elements can be displayed
1-Block Takes up the full width available, with a new line before and after. {display:block;} 2-Inline Takes up only as much width as it needs, and does not force new lines. {display:inline;} 3-Not displayed Some tags, like <meta /> and <style> are not visible. {display:none;} Our focus will be on Inline and Block displays.
1-A block-level element always starts on a new line and takes up the full width available. 2-Can have margins and paddings. 3-Can have width and height. 1-Inline elements do not begin with new line,
flows along with text content. 2-Will ignore top and bottom margin settings, but will apply left and right margins. 3-Will ignore the width and height properties
Block Inline
1-A block-level element always starts on a new line and takes up the full width available. 2-Can have margins and paddings. 3-Can have width and height. 1-Inline elements do not begin with new line,
flows along with text content. 2-Will ignore top and bottom margin settings, but will apply left and right margins. 3-Will ignore the width and height properties.
Block Inline
<div> The general-purpose box. <h1> … <h6> All headings. <p> Paragraph. <ul>, <ol> Lists (unordered, ordered). <li> List items. <table> Tables. <blockquote> Quoting parts of a text. <form> An input form. <header> <footer> <span> The general-purpose inline element. <a> Used for links <strong> Displayed as bold in most browsers. <em> Adds emphasis to the text. <img> Image. <br> It’ s an inline element that forces a new line. <input> Form input fields.
Examples of block elements: Examples of Inline elements:
Although each HTML element has its natural display style, we can override these in CSS.
The CSS display property allows you to change an element’ s behavior from inline to block and vice versa. It has the following syntax: display: block | inline | list-item | none | inline-block
Browser Support for Display property
Visual Examples
<!DOCTYPE html> <html><head> <style> body { background: #000; } h1 { background: #447df3; } p { background: #28b3ed; } div { background: #499050; } ul { background: #80da89; } span { background: #eddd28; } </style></head> <body> <h1>Header</h1> <p>This is a paragraph.</p> <div>Div <span>container</span>.</div> <ul> <li>Row one</li> <li>Row two</li> </ul>
HTML/CSS Block+inline elements Result
Changing behavior with CSS
<!DOCTYPE html> <html><head> <style> body { background: #000; } h1 { display: inline; background: #447df3; } p { display: inline; background: #fff; } div { display: inline; background: yellow; } span { background: orange; } </style></head> <body> <h1>Header</h1> <p>This is a paragraph.</p> <div>Div <span>container</span>.</div> </body></html>
Result
Visual Examples
Display Block
<!DOCTYPE html> <html> <head> <style> .box { display: block; width: 150px; height: 75px; margin: 10px; border: 3px solid #8AC007; } </style> </head> <body> <h1>display: block</h1> <div class=”box”>box 1</div> <div class=”box”>box 2</div> <div class=”box”>box 3</div> <div class=”box”>box 4</div> </body> </html>
Result
More Visual Examples of block vs. inline vs. Block-inline displays
Display Inline
<!DOCTYPE html> <html> <head> <style> .box { display: inline; width: 150px; height: 75px; margin: 10px; border: 3px solid #8AC007; } </style> </head> <body> <h1>display: inline</h1> <div class=”box”>box 1</div> <div class=”box”>box 2</div> <div class=”box”>box 3</div> <div class=”box”>box 4</div> </body> </html>
Result
More Visual Examples of block vs. inline vs. Block-inline displays
Display Inline-block
<!DOCTYPE html> <html> <head> <style> .box { display: inline-block; width: 150px; height: 75px; margin: 10px; border: 3px solid #8AC007; } </style> </head> <body> <h1>display: inline-block</h1> <div class=”box”>box 1</div> <div class=”box”>box 2</div> <div class=”box”>box 3</div> <div class=”box”>box 4</div> </body> </html>
Result
More Visual Examples of block vs. inline vs. Block-inline displays
Resources
http://www.impressivewebs.com/difference-block-inline-css/ https://developer.mozilla.org http://www.w3schools.com