Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
Box Model & Display Types interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
The CSS box model consists of four main areas — content, padding, border, and margin. The outline is not part of the box model; it lies outside the margin and does not affect the box’s size.
/* Box model parts */
.box { margin:10px; border:2px solid; padding:8px; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.
Margin collapsing occurs when the top and bottom margins of two adjacent elements combine into a single margin equal to the larger of the two. It usually happens in vertical stacking and helps maintain consistent spacing without doubling the gap.
p + p { margin-top:20px; }The box model starts with the content area, followed by padding, border, and then margin on the outermost layer. This determines how space is distributed around elements.
/* Inside to outside */ Content → Padding → Border → Margin
In the standard box model, total width equals content width plus padding and border. So 100 + (10 + 10) + (5 + 5) = 130px. Margin adds space outside and doesn’t affect element size.
Total = 100 + 10 + 10 + 5 + 5 = 130px
The <div> element is block-level by default, meaning it takes up the full width available and starts on a new line. Span and a are inline elements.
div { display: block; }Inline elements cannot have width or height applied directly. To control their size, you can change their display type to inline-block or block.
span { display: inline-block; width:100px; }An inline-block element behaves like inline content but supports block properties such as width, height, and vertical margins, making it ideal for layouts like navigation menus.
span { display: inline-block; width:80px; }display: none completely removes the element from the layout flow, while visibility: hidden makes the element invisible but keeps its occupied space intact.
/* Hidden but space reserved */
.box { visibility: hidden; }The box-sizing property controls how the total size of an element is calculated. In content-box, padding and border are added to width and height. In border-box, padding and border are included inside the total width and height. border-box makes layout management easier and is widely used in modern CSS resets.
* { box-sizing: border-box; }Block elements take full width and start on a new line, inline elements stay within text flow and cannot have width or height, and inline-block elements combine both — they stay inline but allow setting width and height. Knowing these differences helps structure responsive layouts properly.
div { display:block; } span { display:inline-block; }display: none completely removes the element from the layout, as if it doesn’t exist, while visibility: hidden hides the element but keeps its original space reserved. This is useful for animations, toggles, and accessibility control in UI design.
.box { visibility:hidden; }To fix overflowing, check padding, border, or box-sizing. Apply box-sizing: border-box to include borders inside total width or use overflow: hidden to clip excess content. Understanding the box model helps solve layout issues quickly.
.container { overflow:hidden; box-sizing:border-box; }The 'border-box' value makes the browser include padding and border within the total width and height. This prevents layout shifts and is preferred in modern web design.
box-sizing: border-box;
The CSS box model describes how every HTML element is structured as a rectangular box. It includes the content area, padding, border, and margin. Padding adds space inside the box, the border surrounds the padding, and the margin adds space outside the border. Understanding this helps control spacing and layout accurately.
div { margin:10px; border:2px solid; padding:5px; }