Mission 4: Shield Modulation
The shield's energy matrix is too close to the hull plating, causing feedback. We need to create an energy buffer inside the shield's border.
Mission Objective
Step 1 / 3
System Briefing: The Physics of Interface Layout
Technician, every single element on your display is a box. Understanding how this box is constructed is fundamental to controlling layout and spacing. This is the CSS Box Model. Mastering it is like understanding the sub-atomic physics of our user interfaces; it governs everything.
The Four Layers
Every box is composed of four layers, from the inside out:
- Content: The actual content of the box, where text and images appear.
- Padding: The transparent space around the content, clearing an area *inside* the border. Think of it as the buffer between a starship's crew quarters and the hull.
- Border: A border that goes around the padding and content. This is the ship's hull itself.
- Margin: The transparent space around the border, clearing an area *outside* the border. This is the minimum safe distance to the next ship in the fleet.
The Critical Command: box-sizing
By default (content-box), when you set an element's width and height, padding and border are *added* to that width and height. This makes layout calculations difficult.
The universal best practice is to set box-sizing: border-box; for all elements. This tells the browser to include the padding and border *within* the element's total width and height. If you set a box to width: 100px;, it will be 100px wide, period, regardless of its border or padding. This is a critical protocol for predictable layouts.
* {
box-sizing: border-box;
}