Interview Questions
Q1. What is the Box model in CSS? Which CSS properties are a part of it?
Ans 1 . A rectangle box is wrapped around every HTML element. The box model is used
to determine the height and width of the rectangular box. The CSS Box consists of Width
and height (or, in the absence of that, default values and the content inside), padding,
borders, margin.
● Content: Actual Content of the box where the text or image is placed.
● Padding: Area surrounding the content (Space between the border and content).
● Border: Area surrounding the padding.
● Margin: Area surrounding the border
Q2. What is VH/VW (viewport height/ viewport width) in CSS?
Ans 2 . It’s a CSS unit used to measure the height and width in percentage with respect
to the viewport. It is used mainly in responsive design techniques. The measure VH is
equal to 1/100 of the height of the viewport. If the height of the browser is 1000px, 1vh
is equal to 10px. Similarly, if the width is 1000px, then 1 vw is equal to 10px.
1
Q3. Difference between margin and padding?
Ans 3 .
Margin Padding
The outer space of an element, i.e. The inner space of an element,
margin, is the space outside the i.e.padding is space inside the element’s
border. border.
It can be negative or any float
It does not allow negative values.
number.
We can set the margin to auto. We cannot set the padding to auto.
Styling of an element such as
Padding is affected by the styling of an
background color does not affect the
element, such as background color.
margin.
Q4 . How does this property work overflow: hidden?
Ans 4 . The overflow property in CSS is used for specifying whether the content has to
be clipped or the scrollbars have to be added to the content area when the content size
exceeds the specified container size where the content is enclosed. If the value of
overflow is hidden, the content gets clipped post the size of the container thereby
making the content invisible. For example,
div {
width: 150px;
height: 50px;
overflow: hidden;
}
If the content of the div is very large and exceeds the height of 50px, the content gets
clipped post 50px and the rest of the content is not made visible
2
Q5 . Different Box Sizing Property?
Ans 5 . The box-sizing CSS property sets how the total width and height of an element
are calculated.
● Content-box: The default width and height values apply to the element's content
only. The padding and border are added to the outside of the box.
● Padding-box: Width and height values apply to the element's content and its
padding. The border is added to the outside of the box. Currently, only Firefox
supports the padding-box value.
● Border-box: Width and height values apply to the content, padding, and border
