Design and layout in CSS
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.
- Simply, Content is the actual content that you write.
- Padding is the clearing area around content before the boundary. You can apply background to padding.
- Border is the bone between padding and margin.
- 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