outline-offset
The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.
Try it
Syntax
/* values */ outline-offset: 3px; outline-offset: 0.2em; /* Global values */ outline-offset: inherit; outline-offset: initial; outline-offset: revert; outline-offset: revert-layer; outline-offset: unset;
Values
The width of the space between the element and its outline. A negative value places the outline inside the element. A value of 0 places the outline so that there is no space between it and the element.
Description
An outline is a line that is drawn around an element, outside the border edge. The space between an element and its outline is transparent. In other words, it is the same as the parent element’s background.
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |
Formal syntax
CSS Border Padding
Padding is defined as space between the HTML contents and its borders. In general, padding will create some extra spaces within the HTML elements we can mention the padding in pixels and percentage format values in the document. CSS Border Padding value should be the length, percentages, or some inherit the values with the parent HTML elements. Using a percentage set of values in the documents contains some box alignments to the front-end codes.
Web development, programming languages, Software testing & others
Syntax
The basic syntax of the padding and borders are below.
CSS Padding:
The above two codes are the basic syntax of the CSS borders and paddings used in the HTML documents. We can mention and specify the different sets of styles in tag based on the user requirements. If we need additional content with animations like images, videos, etc., it will add its own style attributes with predefined colors or styles, widths, heights, etc.
How does Border Padding work in CSS?
Padding contains some CSS styles with properties that can be used to control the lists in HTML tags and elements more sophisticatedly. We can set our customized values with different user requirements boxes containing four sides so that CSS padding will use all four sides of the HTML elements. Some CSS Border Padding properties like padding-top, padding-bottom, padding-left, and padding-right are some of the properties that must be used for the web pages’ customized purposes. Each property has a different set of features with alignments, and their values will differ and be the same when the customized users. We can set the images in padding to set the buffer set of values between the images and the HTML contents using some HTML editors to edit the contents, even though some CSS style alterations for the user requirements. We can add the images selectively for all sides of the padding styles.
In Borders, we can set the borders for all the sides, mainly on the top, left, right, and bottom sides. We can set the borders in HTML tables for storing and retrieving the data in the back-end SQL and non-SQL databases. Even though some clob and blob data will be more spaces and sizes to take from the front end to the back end, then the borders will use to separate the view contents that are border type of styles like dotted-line, dashed, etc. It will help segregate the data in front-end views. Users will identify which data, like images, videos, and HTML content values, are in the back end of the databases.
The border is also a shorthand property; it sets the HTML contents’ width, height, colors, and styles. We know shorthand properties omit the sub-values and reassign them to the initial values. Mainly for images we use in HTML documents, the border set of images will not accept the user-defined or customized values; we will specify it as none. Like something in outlines concepts in CSS, however, we also have some similarities between the systems and borders. The border property is accepted one or more values in the style tag based on the requirement we have to add the border values in the web pages with the help of their attributes.
Mainly HTML table has a border to align the data segregated. When we apply the borders in CSS styles with the HTML tables, it can apply the actual table of the HTML. It will not mention the table cells individually. We can use the classes in both HTML and CSS. The actual benefits of these classes are well-known. By setting borders within style tags, specific tags can be called upon using the associated classes. CSS style classes to set all the styles in one place. Apart from that, each HTML element will be added to the codes.
Examples of CSS Border Padding
Examples of the following are given below:
CSS Border/Outline With Outside Padding
The following tutorial shows you how to use CSS to do «CSS Border/Outline With Outside Padding».
CSS Style
The CSS style to do «CSS Border/Outline With Outside Padding» is
body < background-color:#fffacf; > .article-quote-outer < padding:12px; background-color:white; > .article-quote-inner < border:1px solid silver; padding:15px; > HTML Body
body> div >"article-quote-outer"> div >"article-quote-inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae lacus a metus efficitur pulvinar viverra sed est. Donec pulvinar ligula urna, in imperdiet ex tincidunt non. Curabitur eget nulla lacus The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> body !-- w w w .d e m o 2 s . c o m--> background-color: #fffacf; > .article-quote-outer < padding: 12px; background-color: white; > .article-quote-inner < border: 1px solid silver; padding: 15px; > body> div >"article-quote-outer"> div >"article-quote-inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae lacus a metus efficitur pulvinar viverra sed est. Donec pulvinar ligula urna, in imperdiet ex tincidunt non. Curabitur eget nulla lacus Related
- CSS : border on wrapper not showing
- CSS : border on wrapper not showing (Demo 2)
- CSS : border on wrapper not showing (Demo 3)
- CSS Border/Outline With Outside Padding
- CSS, border over border
- CSS Border Property
- CSS Border Property (Demo 2)
demo2s.com | Email: | Demo Source and Support. All rights reserved.