+ 12

What is the difference between inline and block level elements..? Pls guide me

4th Mar 2018, 8:01 PM

Rohini P S

8 Answers

+ 21

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). An inline element does not start on a new line and only takes up as much width as necessary. Learn more: https://www.w3schools.com/html/html_blocks.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements BTW, this question has already been asked and answered before, please use the search bar. https://www.sololearn.com/discuss/454647/?ref=app https://www.sololearn.com/discuss/346549/?ref=app https://www.sololearn.com/discuss/1028674/?ref=app https://www.sololearn.com/discuss/438805/?ref=app https://www.sololearn.com/discuss/27060/?ref=app

4th Mar 2018, 8:06 PM

NezhnyjVampir

+ 9

HTMLelements are usually either "block-level" elements or "inline" elements. A block-level element occupies the entire space of its parent element (container), thereby creating a "block." ... Browsers typically display the block-level element with a newline both before and after the element.

4th Mar 2018, 8:06 PM

Scooby

+ 9

Block-level Elements If no width is set, will expand naturally to fill its parent container 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) Ignores the vertical-align property So, for a block element, it’s not necessary to give it a set width or to give it a width of 100% if you want it to fill its parent horizontally. In fact, doing either of those things may cause maintainability issues or other undesirable problems. And, as the fourth item in the above list indicates, it’s also not necessary to “clear” a block element; assuming no floats are affecting the block element, it will be cleared automatically and will start on the next “line” in the page’s output. Examples of Block Elements: <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>. Inline Elements : Flows along with text content, thus Will not clear previous content to drop to the next line like block elements Is subject to white-space settings in CSS 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 Is subject to the vertical-align property The easiest way to picture an inline element is to think of it as a box that acts like text. What happens, for example, to text that’s not separated by other elements? It flows one letter after the other. If you put an inline element next to text, it will flow next to that text just like another piece of text. Examples of Inline Elements: <a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

4th Mar 2018, 8:07 PM

Sudarshan Rai