Welcome to part-13 of the series and the first part in CSS questions.
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
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.
This concludes the part-13 of the series and first part of CSS questions.
Top comments (0)