Question 79- What is the difference between display: block, inline-

block and inline?

Answer- These are the different properties which are there in every
HTML element on a webpage. By default everything is display: block
on a page.
display:block
When we give this property to a series of elements, they will come
after each other, as pilling up. Each block element will also cover the
whole width of the page. By default the block-level elements are
<div>, <p>, <hr>, <ul>, <ol>, <li> and more. The below jsfiddle shows
display: block.

display:inline
The jsfiddle for the above can be found here.
Question 80- Is it possible to have width and height in display:inline-
block and display:inline?
Answer- The “display:inline-block” is a combination of
“display:block” and “display:inline”. So, it have some properties of
block level elements also.
It is possible to have width and height in “display:inline-block” but
not in “display:inline”
Same is displayed in the below jsfiddle. You can find the
jsfiddle here.
display:block
display:inline-block
This will set the elements in one row, instead of pilling up. The
height and the the width are the size of the content by default.
There is also a space between two elements, which is put by the
browser. We will update our jsfiddle to show “inline-block”
elements.

display:inline-block vs display:inline
Question 81- Is it possible to have padding and margin in
display:inline-block and display:inline?
Answer- It is possible to have padding and margin in both
“display:inline-block” and “display:inline”.
Same is displayed in the below jsfiddle. You can find the
jsfiddle here.
display:inline-block
display:inline
This will also set the elements in one row. There is also a space
between two elements, which is put by the browser. By default
inline elements are <a>, <img>, <input>, <br>, <select> and more.
We will update our jsfiddle to show “inline” elements.

display:inline-block and display:inline

Question 82- How to eliminate default gap in “display:inline-block”
and “display:inline”?
Answer- There are spaces between elements in both “display:inline-
block” and “display:inline” as we have seen earlier.
The reason you get the spaces is because, well, you have spaces
between the elements (a line break and a few tabs counts as a
space, just to be clear).
There are some tricks to remove the spaces. One of them is to add
HTML comments between elements. You can find more tricks in this
amazing CSS tricks article here.
eliminate default gap
The jsfiddle for the above can be found here.
Question 83- What is CSS box model?
Answer- CSS box model is a box that wraps around every element in
HTML, which includes Content, Padding, Border and Margin.
We can have a empty <div> and set Content(height & width),
Padding, Border and Margin. Also, open the developer tools which
will show our box model.
You can find the JSfiddle here.
The Box model
Question 84- What is difference between box-sizing: content-box
and box-sizing: border-box?
Answer- By default every box(HTML element) is “box-sizing:
content-box”. It means the content is separate from border and
padding. It is displayed below, where the content(100px) is separate
from padding(10px both side) and border(20px both sides).
“box-sizing: content-box”
Now, we will change the above to “box-sizing: border-box” and see
the difference. As you can see from the below jsfiddle, that the box
shrinks. It is because the padding(10px both side) and border(20px
both sides) becomes part of the content(100px).
You can find this JSfiddle here.
“box-sizing: border-box”
Question 85- Can we have negative padding and negative margin in
CSS?
Answer- Let us first understand what is padding and margin in
relation to box-model. The box model is displayed below.
The Box Model
Padding pushes away the border from the content, so it makes the
space around the content. When it’s set to zero, the padding edge is
the same as the content edge.
Margin pushes away the content from any other existing boxes. It is
used to make the horizontal and vertical space between elements.
When margin is set to zero, it means that the margin edge is the
same as the border edge.
By having margin as negative, we can have many interesting CSS
display cases. But negative padding doesn’t make any sense and is
not allowed.
So, we can have negative margin but no negative padding.
Question 86- What is specificity in CSS?
Answer- If you have for an HTML element, having two conflicting
styles then the browser decides which one to apply based on it’s
specificity. Specificity is nothing but set of rules the browser has.
Let’s look into the important rules here -
Last Style Rule
If we have two same styles applied to an element, then the browser
picks the last style. Consider the below example and the
“background: red” will be picked by the browser.
Last Style !important rule
Class rule You can find jsfiddle for the same here.
If one of the rule have class property, then it’s specificity becomes Question 87- How to centrally align a block element inside another
high and it is displayed by browser. element in using plain CSS?
Answer- We will first have two <div>,one an outer and other an
inner. The basic style will cause the inner <div> to be placed at the
top-left.

Class rule
ID rule
If we have an ID property in the element, it’s specificity is more then
the class. So, browser will pick it up.
Initial step
To make it exactly at the centre, the outer div will have a “position:
relative” and inner div will have a “position: absolute”. Then we will
move the inner div to “top: 50%”. It will result in the below.

ID rule
!important rule
The highest specificity is of the !important. If applied to any
element, the browser will pick that rule.
top: 50%
Next we will move it to “left: 50%”. It will result in the below. As you
might have notice it is not exactly centre, because the box was
moved top and left from it’s edge.
 Using CSS Grid
left: 50% Question 89- What is the difference between static, relative,
To exactly centre it we will use the “tranform” property to move the absolute and fixed position?
div. Answer- My default the position property of elements are static. So,
if we have 3 elements then they will have a basic flow as shown in
below jsfiddle.

transform: translate(-50%, -50%)

You can find the JSfiddle for the above here.
position: static
Question 88- How to centrally align a block element inside another
position: relative
element in using flexbox or CSS Grid?
Let’s change the position of second element to relative and move it
Answer- Using flexbox or CSS Grid to centrally align a block element
50px from top. As you might have notice that it moved 50px down
inside another element is very easy. We will use two properties —“
from it’s original position, without affecting the element “one” and
justify-content” and “align-items”. One is used to align along the row
“three”. So, “position: relative” doesn’t disturbs it’s environment
axis and other along the column axis.
that much. The JSfiddle for the same is here.

Using flexbox
The same can be done using CSS grid as it also have those two position: relative
properties. position: absolute
We will now change the position of second element as absolute.
When we give “two” absolute, then “three” moves up below of
“one” as if “two” doesn’t exists. I have given “two” some opacity, so
that we can see what happening behind it. So, “position: absolute”
does disturbs it’s environment as it is referenced to it’s parent. The
JSfiddle for the same is here.
 borders of different color
position: absolute
Now, we will make the height and width of 0. We will now see four
position: fixed
small triangles.
The position fixed is like absolute but it is referenced to the entire
page and not to it’s parent like absolute. So, it will stay at it’s
position even after whatever happen to other elements. We will
replicate the “three” element many times to see what happen. Now,
scroll the jsfiddle and you will notice that “two” stays at it’s place.
This is very useful position property to have a always present header
navbar, even after scrolling down the page. Or to display a pop-up.
The JSfiddle for the same is here.

position: fixed
Question 90- What is the difference between visibility: hidden and
display: none?
Answer- With “visibility: hidden” set to an element, the element
hides but it’s space is left blank and an empty space is visible. four small triangles
But with “display: none”, it is totally removed from the DOM and no Now, we increase the size of border and we will get four big
space is shown behind. The below jsfiddle displays the same. triangles.

visibility: hidden and display: none

Question 91- What is shadow DOM?
Answer- CSS is basically global. If i write an style for one element, it
can effect other element. The Shadow DOM is a way to attach
hidden separated DOM to an element, so that the CSS stays
encapsulated.
Let’s look at the below example. Here we have an <h3> “Welcome
to Our Website”, which takes style from the global CSS and
displayed as blue.
Now, we have a template which we have programmatically inserted
into id “shadowHost” . It have it’s own <h3> style, so “News Widget”
get displayed in green text. This is how we achieve shadow DOM.
The JSfiddle for the same can be found here. four big triangles
So, now we can show any of the triangle we need. We first removed
the “background: red”. Then we have to remove the opposite
triangle of the triangle which we need and also to make the other
shadow DOM
two transparent. Below is what we need to do for a “Blue Triangle”.
Question 92- How to built triangle using plain CSS?
Answer- We will first have a simple <div>, which will be a square box
with equal width and height as shown below.

Square Box
Now we will have all borders of different color.
Blue triangle
The below is what need to be done for “Green Triangle”.
Green Triangle
Question 93- What are pseudo elements in CSS?
Answer- Pseudo elements are used to give you selector some special
effects and it will allow some extra markup for the elements without
disturbing it’s environment.
In the example below we have two pseudo elements ::after
and ::before. As, per there name they inject content after and
before an element respectively.
::after and ::before
One of the practical use of pseudo elements is to create a tooltip.
We can create tooltip with help of pseudo class hover as below.
Now, when we hover over the button, the “Welcome” changes to
“Welcome My Martian friend”
tooltip using hover
You can find the JSfiddle for the above here.
Question 94- What are data attributes and there utilities?
Answer- In HTML if you want to store data, you can use data
attributes. You can see in the below example, we have a button with
various data attributes. Note that data attributes always starts with
keyword “data”. Now, we can access the data attributes inside our
CSS like a variable using “attr”. We used the dat attribute to create a
tooltip, which will add data-name(Nabendu) to Profile if we hover
over it.
data attributes
After hovering, it shows as below.
After hovering
The JSfiddle for the above is here.
Question 95- What is z-index?
Answer- The z-index property specifies the stack order of an
element. An element with greater stack order is always in front of an
element with a lower stack order.
Let’s consider the below jsfiddle. There are four element stack over
each other, but we are able to see only “D” as it is the last one.
Four element stack over each other
We will add some left to 3 element to be able to see the elements.

left to see elements

Now, we will see the z-index property. All four elements have a z-
index 0 by default. We are making z-index: 1 for “C”. Now, “C” with
green background will come on top.

z-index: 1
We are now making element “B” with aqua background, z-
index:2 so now it will show as it is having the highest z-index.

z-index:2