Box and display property in CSS:
Guys in this post we are going to discuss the box and display property in CSS .so, let’s get started, First we are going to discuss box property in CSS. All HTML element is considered as boxes.because it wrapped around HTML element. It consists of margins, borders, padding, and the actual content.Box property in CSS:
The box model allows us to place a border around elements and arrange them elements inside the border.
The parts of the box model are:
1.Margin: The margin is the distance between the edges of the box and the box next to it.
2.Border: A border that goes around the padding and content. The border is affected by the background color of the box.
1.Margin: The margin is the distance between the edges of the box and the box next to it.
2.Border: A border that goes around the padding and content. The border is affected by the background color of the box.
3.Padding: This padding is the space between the content of the box and its border.
4.Content: The content of the box, where text and images appear.
1.Margin property:
The CSS margin properties define the space around elements. The margin does not have a background color and is completely transparent. The top, right, bottom and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all the margin at once. The value of this property is either a length in terms of px, pm, in or percentage.In CSS, it is possible to specify different margins for different sides like,
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
It is possible to specify all the margin properties in one property.This is called a shorthand property. The shorthand property for all the margin properties is “margin”.
Example:
<html>
<head>
<title>margin property</title>
<style type=”text/css”>
P.mar
{
margin-left:1cm;
margin-right:5cm;
margin-top:2cm;
margin-bottom:20px;
padding:1.5cm;
border-width:10px;
border:medium double rgb(250,0,255)
}
</style>
</head>
body>
<p class=”mar”>This is an example for CSS box model
</body>
</html>
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
It is possible to specify all the margin properties in one property.This is called a shorthand property. The shorthand property for all the margin properties is “margin”.
Example:
<html>
<head>
<title>margin property</title>
<style type=”text/css”>
P.mar
{
margin-left:1cm;
margin-right:5cm;
margin-top:2cm;
margin-bottom:20px;
padding:1.5cm;
border-width:10px;
border:medium double rgb(250,0,255)
}
</style>
</head>
body>
<p class=”mar”>This is an example for CSS box model
</body>
</html>
2.Border property:
The CSS border properties allow us to specify the style and the color of an element’s border. There are three properties of a border.1. border-style
2. border-color
3. border-width
Border-style property:
The border-style property allows us to specify the style of the border. The value
of the borders are as follows
Dotted
Defines a dotted border.
Dashed
Defines a dashed border.
Solid
Defines a solid border.
Double
Defines two borders. The width of the two borders is the same as the border-width value.
Groove
Defines a 3d groove border. The effect depends on the border-color value.
Ridge
Defines a 3d ridge border. The effect depends on the border-color value.
Inset
Defines a 3d inset border. The effect depends on the border-color value.
Outset
Defines a 3d outset border. The effect depends on the border-color value.
The border-style property set the border for each of the sides of the elements. The individual border
The border-style property set the border for each of the sides of the elements. The individual border
styles can be controlled with border-top-style, border-bottom-style, border-left-style, border-right-style.
In CSS it is possible to specify different borders for different sides.
In CSS it is possible to specify different borders for different sides.
Example:
P
{
border-top-style:dotted;
border-bottom-style:solid;
border-left-style:dotted;
border-right-style:solid;
}
Border-color property:
{
border-top-style:dotted;
border-bottom-style:solid;
border-left-style:dotted;
border-right-style:solid;
}
Border-color property:
The border-color property is used to set the color of the border. The color can be set by two methods:
Name-specify a color name, like” red”
Hex-specify a hex value, like #FF0000”
As with border widths and styles, you can use a property for each border’s color by using border-top-color, border-bottom-color, border-right-color, border-left-color.
Example:
P{border-style:solid; border-color:red;}
In CSS it is possible to specify different colors for different borders.
Example:
P
{
border-top-color:red;
border-bottom-color:blue;
border-left-color:green;
border-right-color:violet;
}
Border width property:
The border-width property is used to set the width of the border. The width is set in pixels, are by using one of the three pre-defined values: thin, medium, or thick.Four properties set the width for the specific border:border-top-width, border-bottom-width, border-left-width, border-right-width.The width can be specified by using the keyword thin, medium, thick as values indicating the size of the border.
Example:
<html>
<head>
<title>border width example</title>
<style type=”text/css”>
table{
border-width:thick;
border-top-color:red;
border-left-color:orange;
border-right-color:violet;
border-bottom-color:green;
border-top-style:dashed;
border-bottom-style:double;
border-right-style:dotted;
}
</style>
<body>
<table border=”border”>
<caption>nature image</caption><tr><td>nature image</td><td>
<img src=”lotus.jpg” alt=”cant display”></td></tr>
</table>
</body>
</html>
border-left-color:orange;
border-right-color:violet;
border-bottom-color:green;
border-top-style:dashed;
border-bottom-style:double;
border-right-style:dotted;
}
</style>
<body>
<table border=”border”>
<caption>nature image</caption><tr><td>nature image</td><td>
<img src=”lotus.jpg” alt=”cant display”></td></tr>
</table>
</body>
</html>
READ: Font property in CSS
3.Padding property:
The CSS padding properties define the space between the element border and the element content. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all padding’s at once.In CSS it is possible to specify different padding for different sides:
padding-top:25px;
padding-bottom:25px;
padding-left:50px;
padding-right:50px;
Padding shorthand property allows us to specify all the padding properties in one declaration. The shorthand property for all padding properties is “padding”.
Example:
<html>
<head>
<title>margin and padding example</title>
<style type=”text/CSS”>
P.one
{
margin:0.1in;
padding:0.5in;
background-color:#FF33FF;
border-style:dotted;
}
P.two
{
margin:0.5in;
padding:0.1in
background-color:#00FF33;
border-style:dashed;
}
P.three
{
margin:0.3in;
background-color:#FFFF00;
}
P.four
{
padding:0.3in;
background-color:#FF9900;
}
</style>
</head>
<body>
<p class=”one”>welcome to my online help blog<br>[Margin:0.1in;
Padding:0.5in]</p>
<p class=”two”>welcome to my online help blog<br>[Margin:0.5in;
Padding:0.1in]</p>
<p class=”three”>welcome to my online help blog<br>[Margin:0.3in;no padding;no border]</p>
<p class=”four”>welcome to my online help blog<br>[Padding:0.3in;no margin,no border]</p>
</body>
</html>
Display Property:
The display property supports a variety of values. The display property allows an element’s display type to be changed to one of four values: block, inline, list-item, and none. The none value causes an element not to display or use canvas space. For example, a display property value of compact is used to position enclosed text in the margin of the following block element.
<h2 style=”display:run-in;”>heading</h2>
<h2 style=”display:run-in;”>heading</h2>
A value of run-in also is supported for the display property. This should allow a block-level element such as heading to be run in or combined with the next block-level element.
Display block and inline:
CSS code:
a{display:block;}
p{display:inline;}
Example:
<html>
<head>
<title>display property</title>
<style type=”text/css”>
a{display:inline;}
p{display:block;}
p{display:marker;}
</style>
</head>
<body>
<a>This blocks are displayed as inline</a>
<p>hyperlinks are displayed as block</p>
</body>
</html>
<title>display property</title>
<style type=”text/css”>
a{display:inline;}
p{display:block;}
p{display:marker;}
</style>
</head>
<body>
<a>This blocks are displayed as inline</a>
<p>hyperlinks are displayed as block</p>
</body>
</html>
Also read: list property in CSS
No comments:
Post a Comment