Layout Design with the Box Model
Let's explore layout design techniques using the box model 🙂
Center Alignment
To place a block element at the center of the screen, use margin: 0 auto
.
The auto value applies only to the left and right margins, not the top and bottom.
.box { width: 300px; margin: 0 auto; /* 0 top and bottom margin, auto left and right margin for horizontal centering */ }
Card Design
When designing elements in a card format, utilize padding, border, and margin.
.card { padding: 20px; /* Internal spacing */ border: 1px solid #ddd; /* Border */ margin: 20px 0; /* External spacing */ /* Shadow effect */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 0: horizontal, 4px: vertical, 8px: blur level, rgba: color and opacity */ }
Using box-sizing
By default, the width of a box refers only to the width of the content.
Therefore, adding padding
or border
increases the total width of the box.
To include padding
and border
in the element's dimensions without increasing the total width of the box, use the box-sizing: border-box
property.
.border-box-example { box-sizing: border-box; /* Specifies dimensions including padding and border */ width: 200px; /* Element width is 200px */ height: 200px; /* Element height is 200px */ padding: 20px; border: 10px solid black; }
In this case, the total visible width of the box is 200px, with padding and border included within this dimension.
By using box-sizing: border-box
, you can prevent elements from becoming larger than expected due to padding and borders.
What is the most appropriate answer to fill in the blank?
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help