CSS inline-block is a value for the display property that allows elements to be formatted as block boxes that are laid out as inline boxes. Inline block elements start on the same line but take up multiple lines depending on the height and width of the element.
Display inline vs inline-block vs block Values
Here is an example differentiating inline, inline-block, and block:Display: Inline BlockDisplay: InlineDisplay: Block
This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.
Characteristics of the inline-block Display in CSS
Here are some of the key characteristics of the inline-block property:
The ‘display: inline-block’ property is a combination of the ‘display: inline’ and ‘display: block’ properties.
The element will be displayed on the same line as other inline elements.
If there’s not enough space on one line, the elements will wrap onto the next line, similar to words in a paragraph.
The element uses the width and height properties you set, unlike ‘display: inline;’, which ignores these properties.
The element can be floated or positioned.
Difference Between Inline, Block and Inline-block
The following table shows the difference between the ‘display: inline’, ‘display: block’, and ‘display: inline-block’ properties:
inline
block
inline-block
The element is displayed on the same line.
The element is displayed on a new line.
The element is displayed on the same line.
It does not take up the full width of the container.
It takes up the full width of the container.
It does not take up the full width of the container.
It does not have a margin or padding by default.
It has a margin and padding by default.
It has a margin and padding by default.
CSS inline and block Example
Here’s an example that demonstrates the different behaviors of the ‘display: inline’, ‘display: block’, and ‘display: inline-block’ properties.
Example
In this example, we have used an inline tag i.e. span tag to specify an inline element. Then we used inline, block, and inline-block values to see the difference between them.
<html><head><style>
span{
background-color: #1f9c3f;
border: 2px solid #000000;
color: #ffffff;
padding: 5px;
height: 30px;
text-align: center;
}
.inline {
display: inline;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
</style></head><body><h2>Display Inline</h2><div>
There are many variations of passages of Lorem Ipsum
available, <span class="inline">TutorialsPoint
</span>, by injected humour, or randomized words
which don't look even slightly believable.
</div><h2>Display Block</h2><div>
There are many variations of passages of Lorem Ipsum
available, <span class="block">TutorialsPoint
</span> ,by injected humour, or randomized words
which don't look even slightly believable.
</div><h2>Display Inline Block</h2><div>
There are many variations of passages of Lorem Ipsum
available, <span class="inline-block">TutorialsPoint
</span> by injected humour, or randomized words
which don't look even slightly believable.
</div></body></html></pre>
Navigation Links Using inline-block
To create a horizontal navigation menu or list, you can use the inline-block property value where each navigation item is displayed as a block-level element but remains inline with other items.
Example
In this example, we have used the inline-block property value to create a horizontal navigation bar with four links using an anchor tag.
Scrollbars using -webkit-scrollbar
</h3>
This block includes a large amount of content
to demonstrate how scrollbars work when there
is an overflow within an element box.
They consist of vertical or horizontal bars
with a draggable thumb, enabling users to
move content up and down or left to right.
<br><strong>Changes Made:</strong><br>
Changed Scrollbar Thumb Color
<br>
Changed Scrollbar background Color
<br>
Add Hover effect to thumb
</div></body></html>
Styling a CSS Scrollbar
The following example demonstrates how to style scrollbars using the -webkit-scrollbar pseudo-element to customize their appearance by adding colors, width, border and border-radius −
Example
This example will only work properly on webkit browsers(Chrome, Safari, Edge).
Scrollbars using -webkit-scrollbar
</h3>
This block includes a large amount of content
to demonstrate how scrollbars work when there
is an overflow within an element box.
They consist of vertical or horizontal bars
with a draggable thumb, enabling users to
move content up and down or left to right.
</div></body></html>
CSS Scrollbar Related Properties
Following is the list of CSS pseudo-elements related to scrollbar:
Property
Value
Example
-webkit-scrollbar
Selects the entire scrollbar to style it.
Try It
-webkit-scrollbar-button
Selects the buttons at the top and bottom of scrollbar.
Try It
-webkit-scrollbar-thumb
Selects the draggable scrolling thumb.
Try It
-webkit-scrollbar-track
Tracks background of the scrollbar.
Try It
-webkit-scrollbar-track-piece
Selects the intermediate part of the scrollbar track between the thumb’s top and bottom positions.
Try It
-webkit-scrollbar-corner
Selects the bottom corner of scrollbar where horizontal and vertical scrollbar meets.
CSS dimension define the size and space occupied by elements on a webpage. The dimension properties like height, width, max-height, max-width, line-height and many more are used to define width, height of HTML elements in every screen sizes. In this tutorial we will learn how to manage dimension and layout of HTML elements in varying screen sizes.
CSS Setting height and width
The height and width properties allow you to set specific height and width for your positioned element.
These properties can hold following values:
length: Any unit of length (px, pt, em, in, etc.)
percentage (%): A percentage value, which is in percent height/width of the containing block.
auto: Browser calculates the height and width of the element. (For example setting height automatically to match aspect ratio of image for the specified width)
initial: Sets the value of height and width to its default value.
inherit: Inherits the value of height and width from its parent value.
Example
<!DOCTYPE html><html><head><style>
div {
height: 100px;
width: 80%;
background-color: rgb(206, 211, 225);
}
img{
height: auto;
width: 180px;
}
</style></head><body><h1>Height and Width Property</h1><h2>Length and percentage values</h2><div>
This div element has a height of 50px and a width
of 80%.
</div><h2>Auto value</h2><img src="/css/images/logo.png"/><br>
Height is this image adjusted for width 180px so that
aspect ratio is maintained.
</body></html>
The padding, margin and border are not included in height and width.
Set Max-Height and Max-Width
The max-height and max-width properties are used to set the maximum height and width of an element.
max-width: Sets the maximum width an element can be. Prevents an element from exceeding this width, even if the content inside it requires more space.
max-height: Sets the maximum height an element can be. Prevents an element from exceeding this height, even if the content inside it requires more space.
</style></head><body><div class="container"><img src="/css/images/logo.png" ><p>
This image has a maximum width and height set.
Resize the browser window to see how the image
scales down.
</p></div></body></html></pre>
Set Min-Height and Min-Width
The min-height and min-width properties are used to set the minimum height and width of an element.
min-width: Sets the minimum width an element can be. Ensures that the element doesnt shrink below this width, even if the content is smaller.
min-height: Sets the minimum height an element can be. Ensures that the element doesnt shrink below this height, even if the content is smaller.
</style></head><body><div class="container"><div class="box">
This box has a minimum width and height set.
Resize the browser window to see how the box
does not shrink below the specified dimensions.
</div></div></body></html></pre>
CSS Dimension Related Properties
All the properties related to dimensions are listed in the table below:
CSS outline creates lines around the outside of an element’s border, without affecting its size or layout. It means adding an outline won’t affect the element’s size or the positioning of adjacent elements.
Types of Outline Properties
CSS provides following outline properties to style the HTML elements.
outline-style: It specifies whether an outline should be solid, dashed line, double line, or one of the other possible values.
outline-width: It Specifies the width of an outline.
outline-color: It specifies the color of an outline.
outline-offset: It specifies the space between an outline and border edge of the element.
The outline-style Property
CSS outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element.
Example
In this example, we have set the outline-style property of each paragraph with different property values.
CSS outline-width property specifies the width of the outline to be added to the element. Its value should be thin, medium, thick, or length (in pixels, em, etc), just like the border-width attribute.
Example
In this example, we have used outline-width property to set the outline width of the paragraphs using values such as thin, medium, thick and by using length(in px).
To set the color of an outline, the outline-color property is used. If no color is specified for the outline, then the default color i.e. black will be set.
Example
In this example, we have used the outline-color property to set the outline color of paragraphs to green and red.
You can use CSS outline-offset property to set the space between an element and its outline. It is used for creating more visual separation between the element and its outline.
Example
In this example, we have used the outline-offset property to create a solid outline of grey color around div having a separation of 10px from the border.
<!DOCTYPE html><html><head><style>
div {
margin: 20px;
border: 2px dotted #000;
background-color: #08ff90;
outline: 4px solid #666;
outline-offset: 10px;
}
</style></head><body><h2>Outline-offset property</h2><div> The outline-offset is 10px </div></body></html></pre>
Outline Shorthand Property
To set the style, width, and color of an outline, we can use the shorthand outline property. The outline-offset property cannot be passed in shorthand property. It needs to be passed separately.
Syntax
The syntax for using the CSS outline property is as follows:
In this example, we have used the outline property to set the outline of the paragraph and div with different styles, colors, and widths. You can see that the outline-offset property is used separately.
<!DOCTYPE html><html><head><style>
p {
outline: solid 4px grey;
outline-offset: 2px;
border: 2px solid;
padding: 5px;
}
div {
/* You can specify in any order */
outline: 5px dashed darkred;
outline-offset: 2px;
border: 2px solid;
padding: 5px;
}
</style></head><body><p> Check the outline of the paragraph !!!</p><div> Check the outline of the div !!!</div></body></html></pre>
Using Outline With Focus
To highlight the elements when they are focused, the outline property is used with the CSS pseudo-class :focus property.
Example
In this example, we have used the outline property with the :focus property to set the outline of the input field when it is focused.
<!DOCTYPE html><html><head><style>
input {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
outline: none;
}
input:focus {
outline: 3px solid blue;
outline-offset: 4px;
}
</style></head><body><input type="text"
placeholder="Focus me to see the outline" /></body></html></pre>
Outline vs Border
Following table illustrates the differences between outline and border:
Outline is a non-rectangular shape that surrounds an element, usually with a solid color.
A border is a rectangular shape that is drawn around the content of an element.
It does not take up any space in the layout and does not affect the size or position of the element.
It affects the size and position of the element, as it adds width to the element.
It is typically used to highlight or emphasize an element, such as when an element is focused or activated.
It can be used for various purposes, such as separating elements, creating boxes, and adding visual emphasis.
See the difference of outline and border around the p
element. The outline is red in color and the border
is green.
</p></body></html></pre>
List of CSS Outline Properties
Here we have tabulated all the properties associated with CSS outline.
Property
Description
Example
outline
This example shows all the various values passed to outline as shorthand.
Try It
outline-color
This example shows all the various values passed to outline-color.
Try It
outline-style
This example shows all the various values passed to outline-style.
Try It
outline-width
This example shows all the various values passed to outline-width.
Try It
outline-offset
This example shows all the various values passed outline-offset.
CSS cursor property determines the appearance of the mouse cursor when hovering over an element to which this property is applied. Its main purpose is to improve usability by visually representing certain functions.
Syntax
cursor: value;
Property Values
Value
Description
auto
The displayed cursor is determined by the user agent based on the current context. This is the default property that the browser uses to define the cursor.
alias
The displayed cursor is alias cursor, showing there is need to generate an alias or shortcut.
all-scroll
The displayed cursor shows that scrolling is done.
cell
The displayed cursor is cell cursor, showing the option to select the table cell or a group of cells.
col-resize
The displayed cursor is coloumn-resize cursor, showing element or column may be subject to horizontal resizing, often represented as arrows pointing left and right, separated by a vertical bar.
copy
The displayed cursor is copy cursor, showing there is a requirement to create a copy of something.
crosshair
The displayed cursor is Crosshair cursor, commonly used to indicate the selection of elements in a bitmap.
default
The default cursor, which varies depending on the platform, is usually displayed as an arrow.
e-resize
The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
ew-size
The displayed cursor is east-west resize cursor, showing cursor for bidirectional resizing.
grab
The displayed cursor is grab cursor, showing that can grab the element and can be dragged to relocate it.
grabbing
The displayed cursor is grabbing cursor, showing something is being held or pulled to facilitate its movement.
help
The displayed cursor is help cursor, showing information for assistance is accessible.
move
The displayed cursor is move-cursor, showing something can be relocated.
n-resize
The displayed cursor is north direction resize cursor, showing north side can be moved or shifted.
ne-resize
The displayed cursor is north-east resize cursor, showing cursor for bidirectional resizing.
nw-resize
The displayed cursor is north-west resize cursor, showing cursor for bidirectional resizing.
ns-resize
The displayed cursor is north-south resize cursor, showing cursor for bidirectional resizing.
nesw-resize
The displayed cursor is north-east south-west resize cursor, showing cursor for bidirectional resizing.
nwse-resize
The displayed cursor is north-west south-east resize cursor, showing cursor for bidirectional resizing.
no-drop
The displayed cursor is no-drop cursor, showing it may not be possible to place the item in its current location.
not-allowed
The displayed cursor is not-allowed cursor, showing the requested action will not be performed.
pointer
The displayed cursor is pointer cursor, showing the cursor serves as an indicator pointing to a hyperlink.
progress
The displayed cursor is progress cursor, showing the program is performing background tasks, allowing the user to maintain interaction with the interface instead of having to wait for its completion.
row-resize
The displayed cursor is row-resize cursor, showing element or line may be subject to vertical resizing, usually represented by arrows pointing both upward and downward, separated by a horizontal bar.
s-resize
The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
se-resize
The displayed cursor is south-east resize cursor, showing cursor for bidirectional resizing.
sw-resize
The displayed cursor is south-west resize cursor, showing cursor for bidirectional resizing.
text
The displayed cursor is text cursor, showing you can select the text that is normally indicated by an I-shaped cursor.
URL
The displayed cursor is an image specified by the comma separated urls, a generic cursor must also be provided at the end of urls in case the image can not be used.
wait
The displayed cursor is cursor, The program is currently occupied, and the user cannot engage with the interface, this state is sometimes represented by an image of an hourglass or a watch.
w-resize
The displayed cursor is west direction resize cursor, showing west side can be moved or shifted.
zoom-in
The displayed cursor is zoom-in, showing an object can be enlarged through zooming.
zoom-out
The displayed cursor is zoom-out, showing an object can be shrunk through zooming.
Examples of CSS Cursor Property
The following examples demostrate the cursor property with different values.
Demonstration of All Cursors
The following example shows the demonstration of a number of mentioned cursors, to observe the effect hover over each block.
CSS padding is used to create extra space between the border of the element and its contents. In this chapter we will learn different types of padding and properties associated with it.
What is CSS Padding?
In CSS, padding is a property that is used to create additional spacing inside the boundary of an element. The default value for padding is zero. A padding value of zero indicates that content (mostly text content) will start from the border of the element itself.
CSS Padding Example
You can try different ways to use to create padding in the below section and you can change the values as well.
padding: 1em
padding: 10px 0
padding: 10px 50px 20px
padding: 10px 50px 20px 40px
padding: 30px
Try Different Padding Options
Define Padding
To define any padding on any HTML element, you can use the CSS padding property. This property is shorthand property of ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’ properties. A single value will generate padding all around the element.
Syntax
padding:"value";
Example
In this example, we have generated 5px padding surrounding the paragraph element and highlighted the padding area with the light-green background.
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: white;
}
</style></head><body><h1>Tutorials point</h1><h3>CSS Padding</h3><div><p style="padding: 5px;">
CSS Padding Applied on Paragraph Element
</p></div></body></html></pre>
CSS Individual Padding Properties
As we have mentioned earlier the padding is a shorthand property for all Individual sides padding. You can set different padding values for the top, right, bottom, and left sides.
padding-top: This property is used to set the top padding of any element.
padding-right: This property is used to set the right padding of any element.
padding-bottom: This property is used to set the bottom padding of any element.
padding-left: This property is used to set the left padding of any element.
You can check the attached image for more clarity on individual side paddings.
Syntax
The syntax for the CSS individual padding properties is as follows:
.bottom {
padding-bottom: 30px;
}
.right {
padding-right: 30px;
}
.left {
padding-left: 15px;
}
</style></head><body><h3>CSS Padding Individual Properties</h3><div><p class="top"><span>CSS Padding Top Applied on Paragraph Element</span></p><hr><p class="right"><span>CSS Padding Right Applied on Paragraph Element</span></p><hr><p class="bottom"><span>CSS Padding Bottom Applied on Paragraph Element</span></p><hr><p class="left"><span>CSS Padding Left Applied on Paragraph Element</span></p></div></body></html></pre>
All the leftover space on the right side of the element can be confusing to identify the padding, if you try on your own by changing values it will clear the padding concept. Always remember negative values are not allowed for padding in CSS.
CSS Padding Shorthand Property
There are four ways to provide value to the CSS padding property all of them are mentioned and described below with the complete example code.
Single Values: Here you can provide a single value to the padding property that same value will be applicable on four sides of the the element.
Two Values: For two values, the first value(10px) represents the top and bottom padding while the second value(20px) represents the left and right padding. For example - padding: 10px 20px;
Three Values: For three values, the first value(10px) represents the top padding, the second value(15px) represents the left and right padding, and the third value(20px) represents the bottom padding. For example - padding: 10px 15px 20px;
Four Values: For four values, the first value(5px) represents the top padding, the second value(10px) represents the right padding, the third value(15px) represents the bottom padding, and the fourth value(20px) represents the left padding. For example - padding: 5px 10px 15px 20px;
Syntax
The syntax for the padding with single, double, triple, and four values is as follows:
padding:"value" // Single Value
padding:"value value" // Two Values
padding:"value value value" // Three Values
padding:"value value value value" // Four Values
Example
In this example, we have set the padding property of paragraph element with single, double, triple and four values.
</style></head><body><h2>CSS padding Property with Single to Four Values</h2><div><p class="single"><span>Padding property with Single Value.</span></p><hr/><p class="double"><span>Padding property with two Values</span></p><hr/><p class="triple"><span>Padding property with three Values</span></p><hr/><p class="four"><span>Padding property with four Values</span></p></div></body></html></pre>
Padding Mix up Units
CSS does not restrict the usage of multiple units for specifying the padding value while specifying the shorthand property. That means the length value can be passed as pixels along with ems or inches, etc.
Syntax
The syntax of padding property value with mix-up units is as follows:
h2{padding: 20px 4ex .5in 3em;}
Example
In this example, we used different units to specify the padding value.
<!DOCTYPE html><html><head><style>
h2 {
padding: 20px 4ex .5in 3em;
background-color: silver;
}
</style></head><body><div><h2>
The different length units are passed
as padding values to the h2 element.
</h2></div></body></html></pre>
Using padding With Percentage Value
The padding property can be used with a percentage value. The percentages are calculated in relation to the width of the parent element's content area.
Example
In this example, we have used a percent value with a padding property to set the padding of the paragraph element.
<!DOCTYPE html><html><head><style>
div {
width: 300px;
}
p {
padding: 10%;
background-color: silver;
}
</style></head><body><div><p>
The padding defined for p element is
10%, which is calculated as 10% of
width of parent element, which means
it is 10% of 300px and that is 30px.
</p></div></body></html></pre>
Padding Properties Reference
You can explore more examples of padding properties by visiting the sub-topics listed in the following table:
Property
Description
Example
padding
A shorthand property that is used for setting all the padding properties in one declaration.
Lists are useful as they present the information in a structured and organized manner. Lists improve the readability and comprehension of content on a web page. So, if the content is listed, it is easy to follow.
Lists are commonly used to display items, steps, options, or any other type of related information that should be presented sequentially or in a group.
This chapter will discuss how to control list type, position, style, etc., using CSS. Before that let us understand what are the type of lists in HTML.
Table of Contents
Types of Lists
List Style Type Property
List Style Image Property
List Style Position Property
List Style Shorthand Property
Styling Definition List
Styling Unordered List
List Style Type Reference
Types of Lists
Following are types of lists used HTML.
Ordered List (<ol>): Used when the items need to be presented in a specific order. Commonly used for procedures, steps, instructions, or any sequence of information where the order matters.
Unordered List (<ul>): Used when the order of items doesn’t matter, and you want to present items as a group. Commonly used for lists of features, benefits, options, or any non-sequential information.
Definition List (<dl>): Used for terms and their corresponding definitions.
List Style Type Property
The CSS list-style-type property is used to change the marker (such as a bullet or number) style for list items in ordered (<ol>) or unordered (<ul>) lists.
Following example shows some types of list styles.
Example
<!DOCTYPE html><html lang="en"><head><style>
/* Unordered List Styles */
ul.circle {
list-style-type: circle; /* Circle bullets */
}
The list-style-image property can be used to to specify an image/icon as an item list marker.
You can use your own bullet style. If no image is found, then default bullets are returned.
Example
<!DOCTYPE html><html><head><style>
ul {
list-style-image: url('/css/images/smiley.png');
}
ol{
list-style-type: upper-roman;
list-style-image: url('/css/images/smiley');
}
</style></head><body><ul><li> This is unordered list </li><li> We made custom marker for this </li></ul><ol><li> Incorrect URL given for ol style </li><li> No custom image will be used.</li><li> Specified style type will be used. </li></ol></body></html></pre>
It is advisable to provide an alternative for an image as list marker, so that in case of image not getting loaded or gets corrupted, the user is having a fallback option.
List Style Position Property
The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one of the following values.
list-style-position: inside If the text goes onto a second line, the text will wrap underneath the marker. It will also have proper indentation.
list-style-position: outside If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).
list-style-position: inherit Inherits the property of the parent list in the case of nested lists.
Example
<!DOCTYPE html><html><head><style>
body{
padding: 10px;
}
ul {
padding: 0;
border-left: solid 2px;
}
</style></head><body><ul style = "list-style-position:outside;"><li>
The list style position property is outside. In this
case when text overflows to the next line, the marker
will lay outside the text area of list.
</li><li> Check out yourselves. </li></ul><ul style = "list-style-position:inside;"><li>
The list style position property is inside. In this
case when text overflows to the next line, the marker
will lay inside the text area of list.
</li><li> Check out yourselves. </li></ul></body></html></pre>
List Style Shorthand Property
The list-style property allows you to specify all the three list properties in a single declaration.
ul{list-style:url() | Marker Type | Marker Position;}
You can follow any order of the values for the list-style property. If any of the value(s) is missing, it will be filled by the default value for the same. But there has to be minimum one value passed.
.styled-dl dt:hover,
.styled-dl dd:hover {
background-color: #bbdefb;
}
</style></head><body><div class="container"><div class="dl"><h2>Definition List</h2><dl class="styled-dl"><dt>HTML</dt><dd>
A standard markup language for creating web
pages.
</dd><dt>CSS</dt><dd>
A style sheet language used for describing the
presentation of a document.
</dd><dt>JavaScript</dt><dd>
A programming language that enables interactive
web pages.
</dd></dl></div></div></body></html></pre>
List Style Type Reference
Following table lists possible values that can be used for property list-style-type:
CSS margins are used to create space around the outer part of an element. In this tutorial, we will learn how to add different types of margins to HTML elements and the properties associated with it.
What is CSS Margin?
A Margin in CSS makes the layout visually appealing by adding extra space between elements.
You can set the margin for individual sides using properties margin-bottom, margin-top, margin-left and margin-right.
Negative Margin: A margin with a negative value indicates the elements overlap with each other.
CSS Margins Example
You can try different ways to use to create margins in the below section and you can change the values as well.
margin: 1em
margin: 10px 0
margin: 10px 50px 20px
margin: 10px 50px 20px 40px
margin: 30px
Try Different Margin Options
Define Margin
To define any margin on any HTML element you can use the CSS margin property. This property is a shorthand property of the ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’ properties. A single value will generate a margin all around the element.
Syntax
margin:"value";
Example
As you can see in this below example we have made a 10px and 20px margin surrounding the paragraph element and highlighted the margin area with light-green background.
As we have mentioned earlier the margin is a shorthand property for all Individual sides margin. You can set different margin values for the top, right, bottom and, left sides.
margin-top: This property is used to set the top margin of any element.
margin-right: This property is used to set the right margin of any element.
margin-bottom: This property is used to set the bottom margin of any element.
margin-left: This property is used to set the left margin of any element.
You can check the attached image for more clarity on individual side margins.
Syntax
The syntax for the CSS individual margin properties is as follows:
In this example, we have created four different elements and generated a margin on each element's individual sides with the above-mentioned properties.
.bottom {
margin-bottom: 30px;
}
.right {
margin-right: 30px;
}
.left {
margin-left: 15px;
}
</style></head><body><h3>CSS Margin Individual Properties</h3><div><p class="top"><span>CSS Margin Top Applied on Paragraph Element</span></p><hr><p class="right"><span>CSS Margin Right Applied on Paragraph Element</span></p><hr><p class="bottom"><span>CSS Margin Bottom Applied on Paragraph Element</span></p><hr><p class="left"><span>CSS Margin Left Applied on Paragraph Element</span></p></div></body></html></pre>
CSS Margin Shorthand Property
There are four ways to provide value to the CSS margin property all of them are mentioned and described below with the complete example code.
Single Value: Here you can provide a single value to the margin property that same value will be applicable on four sides of the the element.
Two Values: For two values, the first value(10px) represents the top and bottom margin while the second value(20px) represents the left and right margin. For example − margin: 10px 20px;
Three Values: For three values, the first value(10px) represents the top margin, the second value(15px) represents the left and right margin, and the third value(20px) represents the bottom margin. For example − margin: 10px 15px 20px;
Four Values: For four values, the first value(5px) represents the top margin, the second value(10px) represents the right margin, the third value(15px) represents the bottom margin, and the fourth value(20px) represents the left margin. For example − margin: 5px 10px 15px 20px;
Syntax
The syntax for the margin with single, double, triple, and four values is as follows:
margin:"value" // Single Value
margin:"value value" // Two Values
margin:"value value value" // Three Values
margin:"value value value value" // Four Values
Example
In this example, we have set the margin property of paragraph element with single, double, triple and four values.
</style></head><body><h2>CSS margin Property with Single to Four Values</h2><div><p class="single"><span>Margin property with Single Value.</span></p><hr/><p class="double"><span>Margin property with two Values</span></p><hr/><p class="triple"><span>Margin property with three Values</span></p><hr/><p class="four"><span>Margin property with four Values</span></p></div></body></html></pre>
Margin Mix up Units
CSS does not restrict the usage of multiple units for specifying the margin value while specifying the shorthand property. That means the length value can be passed as pixels along with ems or inches, etc.
Syntax
The syntax of margin property value with mix-up units is as follows:
h2{margin: 20px 4ex .5in 3em;}
Example
In this example, we used different units to specify the margin value.
<!DOCTYPE html><html><head><style>
div{
border: 2px solid;
}
h2 {
margin: 20px 4ex .5in 3em;
background-color: silver;
}
</style></head><body><div><h2>
The different length units are passed
as margin values to the h2 element.
</h2></div></body></html></pre>
Using margin With Percentage Value
The margin property can be used with a percentage value. The percentages are calculated in relation to the width of the parent element's content area.
Example
In this example, we have used a percent value with margin property to set the margin of the paragraph element.
<!DOCTYPE html><html><head><style>
div {
width: 300px;
border: 2px solid;
}
p {
margin: 10%;
background-color: silver;
}
</style></head><body><div><p>
The margin defined for p element is
10%which is calculated as 10% of width
of parent element(div), which means
it is 10% of 300px and that is 30px.
</p></div></body></html></pre>
Centering Elements with CSS Margin
To center an element using CSS margin property, we use auto value with margin property.
Example
In this example, we have centered a div element using margin:auto value.
<!DOCTYPE html><html><head><style>
div {
width: 200px;
margin: auto;
background-color: lightgray;
}
</style></head><body><h2>CSS margin:auto Property</h2><div>
A div element centered using margin: auto;
</div></body></html></pre>
Margin Properties Reference
You can explore more examples of margin properties by visiting the sub-topics listed in the following table:
Property
Description
Example
margin
A shorthand property that is used for setting all the margin properties in one declaration.
CSS border-inline is a shorthand property that sets the values for different logical inline border attributes, border-inline-width, border-inline-style and border-inline-color in one single declaration. The border-style is required. Default values of color and width will be used if not specified. The property is affected by writing mode, text-orientation and direction.
It specifies the width of element borders in inline direction. Default value is medium.
border-inline-style
It specifies the style of element borders in inline direction. Default value is none.
border-inline-color
It specifies the color of element borders in inline direction. Default value is color of the text.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Border Inline Property
The following examples explain the border-inline porperty with different values.
Defining All Values of Border Inline Property
To define the values of border-inline-width, border-inline-style and border-inline-color in one single declaration, we use the border-inline property.The following example shows how this is done.
This has border-inline property with
4px width solid style and red color
</p><p class="borders border2">
This has border-inline property with
6px width dashed style and blue color
</p><p class="borders border3">
This has border-inline property with
8px width dotted style and yellow color
</p><p class="borders border4 ">
This has border-inline property with
8px width double style and brown color
</p></div></body></html></pre>
Constituent Properties of Border Inline Property
The border-inline property is composed of properties border-inline-width, border-inline-style and border-inline-color. The following example shows how these individual properties combine to show the border-inline effect.
This has border-inline-width:4px,
border-inline-style:solid,
border-inline-color:red
</p><p class="borders border2">
This has border-inline-width:6px,
border-inline-style:dashed,
border-inline-color:blue
</p></div></body></html>
Border Inline Property with Writing Mode
The border-inline property is affected by the writing mode which decides the direction of the inline borders. In vertical writing mode, it affects the top and bottom borders while in horizontal writing mode, it affects the left and right borders. These are shown in the following example.
CSS border-block property is a shorthand property for assigning values to border-block-color, border-block-style and border-block-width in one go. The border-block-style is required parameter. If other parameters are not mentioned then default values will be used. This property depends on the direction of the block which is determined by the writing mode.
It specifies the width of the border in the block direction. Default is medium.
border-block-style
It specifies the style of the border in the block direction. Default is none.
border-block-color
It specifies the color of the border in the block direction. Default is text’s color.
initial
This sets the property to its default value.
inherit
This inherits the property from the parent element.
Examples of CSS Border Block Property
The following examples explain the border-block property with different values.
Setting the Width of Border
To set the width of the border, we use the border-block-width component of the border-block property. In the following example, we have used ‘thick’ and 10px width for border-block-width property.
#width2 {
padding: 30px;
border-block-style: solid;
border-block-width: 10px;
}
</style></head><body><h2>CSS border-block property</h2><p id="width1">
This first example shows the width property
of the border-block with thick value.
</p><p id="width2">
This second example shows the width property
of the border-block with 10px value.
</p></body></html></pre>
Setting the Style of Border
To set the style of the border, we use the border-block-style component of the border-block property. In the following example, we have used 'solid' and 'dashed' styles for border-block-style property.
#style2 {
padding: 30px;
border-block-style: dashed;
}
</style></head><body><h2>CSS border-block property</h2><p id="style1">
This first example shows the style property
of the border-block with solid value.
</p><p id="style2">
This second example shows the style property
of the border-block with dashed value.
</p></body></html></pre>
Setting the Color of Border
To set the color of the border, we use the border-block-color component of the border-block property. In the following example, we have used 'red' and 'blue' colors for border-block-color property.
#color2 {
padding: 30px;
border-block-style: solid;
border-block-color:blue;
}
</style></head><body><h2>CSS border-block property</h2><p id="color1">
This first example shows the color property
of the border-block with red value.
</p><p id="color2">
This second example shows the color property
of the border-block with blue value.
</p></body></html></pre>
Setting all Values at Once
To set the values of width, style and color at once, we can simply use the border-block property by providing all the values at once. In the following example, the width has been taken as 5px, style as dashed and color as green.
</style></head><body><h2>CSS border-block property</h2><p id="block">
This example shows the border-block property
defining all values at once.
</p></body></html></pre>
Setting Border Block with Writing Mode
The writing-mode in the context of border-block influences the direction of the border. By default, the border appears horizontally, however by changing the writing mode, the border's direction can be changed
