CSS Box property
Box property
All Html element can be measured as boxes. In CSS the term "box model" is used when talking about design and layout. The CSS box model is basically a box that wraps around each HTML elements it consists of margins, borders, padding and action content. The image below illustration the box model
Details of the different parts:
Margin :
The blank area around the border of an element is called margin. It is used to create an extra space around an element. The margin is transparent.
Border :-
A border that goes around the padding and content. One is a visual border in a document, sometimes a solid line, dotted or dashed line, or one made up of various objects, like flowers, baseballs, animals, or virtually any other object.
Padding :-
It is used to generate space around an element's content, inside of any defined borders. The padding is transparent, An element's padding is the space between its content and its border. The padding property is a shorthand property for padding-top. padding-right. padding-bottom.
Content :-
The contents of box, where text and images appear. The content attribute gives the value associated with the http-equiv or name attribute.
box model allows us to attach a border around elements and to classify space between elements.
CSS Box property
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue:
width: 400px;
border: 20px solid yellow;
padding: 50px;
margin: 50px;
text-align: justify;
}
</style>
</head>
<body>
<h2> Welcome Toalaji Publication</h2> 17 <p> Here we see the demonstration of Box Model.</p>
<div>This text is written in the box or you can say that it is the text content of the box. The width of the box is 400px and the ineternal color is lightblue. We have added a 50px padding, 50px margin and a 20px yellow border.</div>
</body>
</html>
CSS Box property
output
overflow: scroll
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
overflow: scroll
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: purple;
width: 200px;
height: 70px;
overflow: scroll;
border: 5px solid black;
}
</style>
</head>
<body>
<h2>overflow: scroll:</h2>
<div class="ex1">
It Indicates that the content is clipped but scroll-bar is added to see the rest of the content.It Indicates that the content is clipped but scroll-bar is added to see the rest of the content.</div>
</body>
</html>
overflow: scroll
output
overflow: hidden
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area
overflow: hidden Example
<!DOCTYPE html>
<html>
<head>
<style>
div.ex2 {
background-color: yellow;
width: 110px;
height: 70px;
overflow: hidden;
}
</style></head><body>
<h2>overflow: hidden </h2>
<div class="ex2">It Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region. </div>
</body>
</html>
overflow: hidden
output
overflow:auto
The auto value is similar to scroll , but it adds scrollbars only when necessary: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
overflow:auto
Example
<html>
<head>
<style>
div.ex3 {
background-color: lightblue;
width: 110px;
height: 70px;
}
</style></head>
<body>
<h2>overflow:auto </h2>
<div class="ex2">It Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region. </div>
</body>
</html>
overflow:auto
output
Overflow: visible (default)
By default, the overflow is visible , meaning that it is not clipped and it renders outside the element's box: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Overflow: visible
Example
</html>
<head>
<Style>
div.ex4 {
background-color: lightblue;
width: 110px;
height: 70px;
border: 5px dotted black;
}
</style>
</head>
<body>
<h2>overflow: visible</h2>
<div class="ex4">It Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region. </div>
</body>
</html>
Overflow: visible
Output
Related post
Comments
Post a Comment