Sign in
Log inSign up

Design and layout in CSS

Taimoor Sattar's photo
Taimoor Sattar
·Feb 6, 2019

In CSS, when you think about design and layout box model and display terms are widely used. Box model is applied to HTML element which says that how much space is used by HTML element. It consist of content, padding, border and margin respectively.

  1. Simply, Content is the actual content that you write.
  2. Padding is the clearing area around content before the boundary. You can apply background to padding.
  3. Border is the bone between padding and margin.
  4. Margin clear area outside the boundary.
margin: 50px;
padding: 50px;
border: 5px solid black;

In CSS, display are used to specify the behaviour of box model of an HTML element. For example, text in button should not break. If some part of text of button is on one line and other part on another line, than button should look odd.

p{
display: none;
display: inline;
display: block;
display: inline-block;
}

Resources

Display in CSS

CSS box model