Documente Academic
Documente Profesional
Documente Cultură
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.
“box-sizing: border-box”
eliminate default gap Question 85- Can we have negative padding and negative margin in
The jsfiddle for the above can be found here. CSS?
Question 83- What is CSS box model? Answer- Let us first understand what is padding and margin in
Answer- CSS box model is a box that wraps around every element in relation to box-model. The box model is displayed below.
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.
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.
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.
Square Box
Now we will have all borders of different color.
Blue triangle
The below is what need to be done for “Green Triangle”. 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.
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.
data attributes
After hovering, it shows as below.
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