gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Update packages and fix local dev (#26907)

Browse Source 
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. -->

- [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md).
- [x] My pull request has a descriptive title (not a vague title like `Update index.md`)
- [x] My pull request targets the `master` branch of freeCodeCamp.
This commit is contained in:
Stuart Taylor
2018-10-23 14:18:46 +01:00
committed by mrugesh mohapatra
parent 153e1c9f38
commit 7da04a348b
341 changed files with 17836 additions and 1026 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
mock-guide/english/html/block-and-inline-elements/index.md Normal file
View File

@@ -0,0 +1,37 @@
---
title: Block and Inline Elements
---
## Block and Inline Elements
Let us understand them using below examples :
#### Code Sample with Output :
![Block Output](https://user-images.githubusercontent.com/16048167/31070017-6f2cf0a2-a77c-11e7-9de6-110b9d0b488d.PNG)
#### Block-Level Element :
A Block-level element occupies the entire space of the parent(container) such as `<div>` and `<p>` in the example .
Note that both `<div>` and `<p>` start from a new line each time, forming a **block-like** structure. Block-level elements begin on new lines.
Common **block-level elements** are `<div>`,`<p>`,`<article>`,`<section>`,`<figure>`,`<footer>` etc.
#### Inline Element :
Inline as the name says "included as a part of the main text and not as a separate section". Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines.
Some of the **inline elements** are `<a>`,`<span>`,`<img>`,`<code>`,`<cite>`,`<button>`,`<input>` etc.
#### Code Sample with Output :
![Inline Output](https://user-images.githubusercontent.com/16048167/31069389-e1e3fc10-a779-11e7-86d2-6685e0061f52.png)
***Note*** : Block-level elements may contain other block-level elements or inline elements. Inline elements **cannot** contain block-level elements.
#### Changes In HTML5
While an understanding of block and inline elements is still relevant, you should be aware that these terms were defined in prior versions of the HTML specification. In HTML5, a more complex set of "content categories" replaces block-level and inline elements. Block-level elements are largely placed in the "flow content" category in HTML5, while inline elements correspond to the "phrasing content" catagory. For more information on the new content categories in HTML5, including flow content and phrasing content, refer to the <a href = "https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">Content categories page on the Mozilla Developer Network.</a>
#### More Information:
Please refer <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline' target='_blank' rel='nofollow'>Mozilla Docs</a>