Summary
Highlights
The tutorial introduces margins and padding in CSS as attributes to control the spacing of HTML elements. Padding controls spacing inside an element, while margins control spacing outside an element. An example of a blue div with a paragraph inside is used for demonstration.
Padding adds space inside an element. By applying 'padding: 10px;' to the div, space is created between the text and the div's border. The padding area is highlighted in green during inspection. Increasing padding, for example to '50px', further demonstrates this internal spacing.
Users can control padding on individual sides using properties like 'padding-top', 'padding-bottom', 'padding-right', and 'padding-left'. Alternatively, a shorthand notation allows setting all four sides in a clockwise manner: 'padding: top right bottom left'.
Margins create space outside an element, pushing other elements away. Applying 'margin: 25px;' to the div moves the entire container inwards, creating external space highlighted in orange during inspection. This demonstrates how margins affect the element's position relative to its surroundings.
Similar to padding, margins can be applied to individual sides (e.g., 'margin-top') or using a shorthand notation. The shorthand follows the same clockwise order: 'margin: top right bottom left', allowing precise control over external spacing.
The tutorial briefly touches on negative margins, cautioning against their overuse. A negative margin, such as 'margin-top: -25px;', moves an element upwards on the screen, potentially causing elements to overlap. While generally to be used carefully, they can be useful in specific scenarios.