Interview Preparation — CSS Questions-1

Photo by Kobu Agency on Unsplash

Welcome to part-13 of the series and the first part in CSS questions. You can find part-12 here.

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: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

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

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: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 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.

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.

This concludes the part-13 of the series and first part of CSS questions. You can find part-14 here.

UI Lead- ReactJS, JavaScript and everything in-between.