This content originally appeared on DEV Community and was authored by Vidya
Block-level Elements
These elements start on a new line. They take the full width of the page(left to right).
example: <div>,<p>,<h1>
<p> This is block element</p>
Inline Elements
These elements do not start on a new line. They only take space needed for their content. you cannot set width or height directly.
example: <span>,<a>,<strong>
<span>This is inline</span>
Margin
Space outside the border of an element. It creates empty space between that element and the surrounding elements.
example: if you give margin:20px; the element will push away 20px from all sides of its neighbors.
Padding
Padding is the space inside an element,between the content and the border. It pushes the content away from the border but stays inside the element’s box.
example: div{
padding:10px;
}
Flex
Flex (Flex box) is a CSS layout model. It is used to arrange elements inside a container. Elements can be placed in a row or a column. It automatically adjusts items to fit the available space. Flex makes alignment and spacing very simple. It helps create responsive designs without extra code. It makes layouts flexible, clean and easy to manage.
Head
It is Invisible-never displayed on the page. It contains metadata-page title, CSS links,scripts, etc.It’s required in every HTML document.
example: <head>
<title>My Page</title>
</head>
Header
It is visible-displayed on the page. It contains logo,navigation menu, or title.
example: <header>
<h1>website name</h1>
<nav>menu</nav>
</header>
Border
The line around the content and padding of an element.
example: div{
border:2px solid black;
}
Position
Static –> Default, normal flow
Relative –> Moves element relative to its original position
Absolute –> Placed at exact position on page or parent
Fixed –> Stays in the same place even when scrolling
Sticky –> Scrolls normally, but sticks at a position
example: div{
position:absolute;
top:50px;
left: 30px;
}
This content originally appeared on DEV Community and was authored by Vidya