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 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.
Block Block Inline Inline 1-A block-level element always starts on a new 1-A block-level element always starts on a new 1-Inline elements do not begin with new line, 1-Inline elements do not begin with new line, line and takes up the full width available. line and takes up the full width available. only takes up as much width as necessary, and only takes up as much width as necessary, and flows along with text content. flows along with text content. 2-Can have margins and paddings. 2-Can have margins and paddings. 2-Will ignore top and bottom margin settings, 2-Will ignore top and bottom margin settings, but will apply left and right margins. but will apply left and right margins. 3-Can have width and height. 3-Can have width and height. 3-Will ignore the width and height properties 3-Will ignore the width and height properties.
Examples of block Examples of Inline elements: elements: <div> The general-purpose box. <span> The general-purpose inline element. <h1> … <h6> All headings. <a> Used for links <p> Paragraph. <strong> Displayed as bold in most browsers. <ul>, <ol> Lists (unordered, ordered). <em> Adds emphasis to the text. <li> List items. <img> Image. <table> Tables. <br> It’ s an inline element that forces a new line. <blockquote> Quoting parts of a text. <input> Form input fields. <form> An input form. <header> <footer>
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 HTML/CSS Result Block+inline elements <!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>
Visual Examples Changing behavior Result 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>
More Visual Examples of block vs. inline vs. Block-inline displays Display Block Result <!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>
More Visual Examples of block vs. inline vs. Block-inline displays Display Inline Result <!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>
More Visual Examples of block vs. inline vs. Block-inline displays Display Inline-block Result <!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>
Resources http://www.impressivewebs.com/difference-block-inline-css/ https://developer.mozilla.org http://www.w3schools.com
Recommend
More recommend
