CSS Borders

Introduction to CSS Borders

Borders help frame elements and make them stand out. You can control the style, width, and color of borders.

Example:

div { border: 2px solid black; }

This adds a 2-pixel solid black border around all

elements.

CSS Margins and Padding

Margins and padding are used for spacing elements. Margins create space outside the element, while padding creates space inside, between the element’s content and its border.

Example

p { margin: 20px; padding: 10px; background-color: lightgray; }

This sets a 20-pixel margin outside the paragraph and a 10-pixel padding inside the element, with a light gray background.

CSS Box Model

The box model is fundamental in CSS. Every HTML element is treated as a rectangular box. Understanding the box model is essential for controlling the size and spacing of elements.

The box model consists of:

Content: The actual content of the element.
Padding: Space between the content and the border.
Border: Surrounds the padding.
Margin: Space outside the border.

div { width: 300px; padding: 20px; border: 5px solid black; margin: 15px; }

This example will set the content width to 300 pixels, add 20 pixels of padding, a 5-pixel border, and a 15-pixel margin.

CSS Text Styling

CSS gives you control over how text appears on the screen. You can change the font, size, color, and alignment of text.

Example:

p { font-family: Arial, sans-serif; font-size: 16px; color: #333; text-align: center; }

This will style all paragraphs with the Arial font, set the font size to 16 pixels, color the text dark gray, and center-align the text.

Request more information

CSS Borders