DEV Community

Cover image for CSS Box Model & Text Alignment
vishwa v
vishwa v

Posted on

CSS Box Model & Text Alignment

Introduction
When building web pages, HTML gives us the structure, but CSS controls the design and layout. To style elements properly, you need to understand the box model — which includes padding, margin, border, and content

Implementation

Properties used
1.padding is the space between the content and the element’s border.
2.Margin is the space outside the element’s border, pushing it away from other elements
3.Text align is perfect for centering text or links inside a container, while margins are used to center the container itself.
4.text decoration used for removing line below the link
5.Border used for outline around the element.
6.* used for global thing which used to remove unwanted line

Elements
It divide into 2types

  1. block element-An element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

  2. inline element-An element does not start on a new line.
    An inline element only takes up as much width as necessary.

Output

Top comments (0)