Padding on Div Border

Padding on div border

You should be able to do this with the CSS outline property:

<style>
.outer {
       outline: 2px solid #CCC;
       border: 1px solid #999;
       background-color: #999;
       }
</style>

<div class="outer">
example
</div>

padding not working on border-ed div

The background of an element applies to any padding...unless the background-clip property is changed.

* {  box-sizing: border-box;}.brand {  margin: 25px auto;  position: relative;  height: 100px;  width: 100px;  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;  background-size: 100% auto;  padding: 10px;  border: 1px solid red;  border-radius: 50%;  background-clip: content-box;}.brand:hover {  padding: 5px;}

<div class="brand"></div>

How to add margin or padding to borders?

If we can add margin to span element we should add display:block or display:inline-block;.

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

I added bootstrap margin as m-2 and padding as p-2 and also add d-inline-block

More information about bootstrap spacing:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<span class="border-bottom border-danger p-4 m-2 d-inline-block">This is Span</span>

CSS border inside padding

Use padding, that's inside the border:

div {    box-sizing: border-box;    display: inline-block;    width: 150px;    border: 1px solid #CCC;    padding: 30px 20px;}

<div style="border: 1px solid #AAA">
  <p>    Hey!  </p>
</div>

Possible to place border on inside of padding using only one div?

Try this:

#bor-outline {
  width: 100px;
  height: 100px;
  background: grey;
  border: 4px solid #292929;
  outline: 4px solid #e3e3e3;
}

<div id="bor-outline">
  hello
</div>

put margin on border - css

Margin adds 50 px on the outside of the div

Padding adds 50 px on the inside of the div

You can see the results of the margin and padding if you run the code snippet

body{  background-color: yellow;}#margin{  background-color: green;  margin: 50px;}#padding{  background-color: red;  padding: 50px;}

<body>  <div id="margin"><h1>This div has margin</h1></div>  <div id="padding"><h1>This div has padding</h1></div></body>

Add internal border on div within the padding

Solution #1 Use box-shadow with inset

We can take advantage of the fact that multiple values can be used for the box-shadow property.

The trick here is to set the first inner shadow with the background color of the div, and the second inner shadow - which is slightly larger - with the color of the border.

FIDDLE

div#border {  padding: 10px;  box-shadow: inset 0 0 0 9px #ccc, inset 0 0 0 10px black;  background-color: #ccc;}

<div id="border">some content</div>

How to pad a div without extending the border?

Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)

<html>
<head>
    <style type="text/css">
        .container {            
            width:500px;
            padding-left:200px
        }
        .inner{
            border-bottom: 1px dotted #999999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">
            asdf</div>
    </div>
</body>

This is what it should look like: http://jsfiddle.net/dKVTb/1/

Border-right and border-left height not matching the padding on element HTML-CSS

To be specific to your answer,

Remove padding from container
Assign padding to i

:root {  --gray: #CBC4C4;  --blue: #029DF1;  --white: #FFF;  --black: #000;  --secondBlue: #0089D3;}
* {  padding: 0;  margin: 0;  font-family: Roboto, sans-serif;  color: var(--white);}

/*REMOVED FROM HERE*/
#container {  margin: 100px auto;  background-color: var(--blue);  width: 300px;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;}
p,i {  margin-right: 50px;}

/*ADDED HERE*/
i {  border-left: 1px solid var(--gray);  border-right: 1px solid var(--gray);  padding: 20px;  height: inherit;  color: var(--black);}
i:hover {  background-color: var(--secondBlue);}

<!DOCTYPE html><html lang="en">
<head>  <script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link rel="stylesheet" href="style.css">  <title>Stopwatch</title></head>
<body>  <div id="container">    <p id="timeArea">Blank</p>    <!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->    <i id="playButton" class="fas fa-play fa-2x"></i>    <p id="reset">Reset</p>  </div></body>
</html>

Padding on Div Border