CSS - Display Block And Inline
Learn css - css tutorial - CSS Display Block And Inline - css examples - css programs
Display inline block - Definition and Usage
- In css block-level element always starts on a new line and takes up the full width available.
- In css inline element does not start on a new line and only takes up as much width between the elements.
- A block-level element always starts on a new line and takes up the full width available.
- An inline element does not start on a new line and only takes up as much width between the elements.
html sample code - css html
Code Explanation - style css
- Here Span is an html element which is used to group inline-elements in a document. The tag providesno visual change by itself.
- In CSS, display property with values as “block” for a span tag will result in a line break between multiple span elements.
- li stands forlist and it is an html element.
- Applying display property with value as “inline“ will display a lists horizontally.
- First we are using span tag for the text “Welcome to wikitechy”. And another span tag for “The best E-learning Website in the world” .Since we had specified display property as block for span tag , so the line break appears between the two texts.
- Mostly all the list items will appear vertically in the browser window. In CSS, Display: inline displays all the list elements to appear horizontally.
Code Output - css online
- The text “The best e-learning website in the world” will have a line break and appear in the next line, which is displayed in the above window.
- The lists Wiki andTechy appear horizontally.