Very Short Question and Answers - Borders and Box

'border-style' specifies the type of border around an element, such as solid, dashed, dotted, double, or none.

Common values include solid (a single solid line), dashed (dashes instead of a line), and dotted (series of dots).

p { border-style: solid; }

'border-width' sets how thick the border around an element will be.

Pixels (px) and predefined sizes like thin, medium, and thick.

div { border-width: 2px; }

Named colors (like red, blue), hex values (e.g., #ff0000), and RGB values (e.g., rgb(0, 0, 0)).

h1 { border-color: blue; }

It creates a 2px thick red solid border around all paragraph elements.

'margin' is the space outside the border of an element and controls the distance between elements.

Pixels (px), em, percentages (%), and the keyword 'auto' which lets the browser decide the margin.

The order is top (10px), right (20px), bottom (30px), and left (40px).

'padding' defines the space inside the border, between the content and the border.

Padding increases space around text inside a box, making content easier to read.

Margin is the space outside the border creating distance between elements, while padding is the space inside the border creating space between content and border.

No, margin does not affect the element's size; it only creates space outside the element.

'Outline' draws a line outside the border and does not take up space or affect the layout, unlike border which is part of the box model and affects element size.

p { outline: dashed 2px blue; }

Padding increases the total box size, while margin does not.

The div has a green solid border 3px thick, with 15px padding (space between content and border), 20px margin (space outside the border), and a red dashed outline 2px thick outside the border.