How to Add Border Outside The Margin Using CSS

Is it possible to add border outside the margin using CSS?

You won't be able to do this with just the element's box since a box is defined by its border edge, not its margin edge, and having borders outside an element's margin edge would interfere with margin collapse.

You could cheat by creating a pseudo-element with your desired border, but IMO it's more trouble than it's worth. The element itself needs to have a margin value equal to your intended margin amount plus your desired border width, and the pseudo-element needs to be absolutely positioned with the element as its containing block, and extend out of the box by this sum (assuming you don't want the border to eat into the margins):

html {    background-color: #fff;}
body {    float: left;    background-color: #ccc;}
div {    position: relative;    width: 100px;    height: 100px;    background-color: #ff0;    margin: 30px;}
div::before {    content: '';    position: absolute;    top: -30px;    right: -30px;    bottom: -30px;    left: -30px;    border: 5px solid #f00;}

<div></div>

CSS Border/Outline With Outside Padding

outline-offset is not supported in Internet Explorer.

You could use a combination of outline and border to achieve the same effect.

Here border is used for the silver line and outline is used for the white space surrounding the element.

body {  background: #fffacf;  padding: 15px;}
.articleQuote {  background-color: #FFFFFF;  font-family: 'PT Sans', sans-serif;  font-size: 20px;  color: navy;  padding: 25px 25px 25px 25px;  outline-style: solid;  outline-color: white;  outline-width: 10px;  text-align: center;  border: 1px solid silver;}

<div class="articleQuote">  "80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."</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>

CSS Outside Border

I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.

Look at the simple example below in your browser:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Margin for bottom border

You can use pseudo-element and then you can change size of border

.margin-check {  display: inline-block;  position: relative;}
.margin-check:after {  position: absolute;  content: '';  border-bottom: 1px solid #d2d7da;  width: 70%;  transform: translateX(-50%);  bottom: -15px;  left: 50%;}

<div class="margin-check">  Something I am typing for checking the border margin</div>

How to remember in CSS that margin is outside the border, and padding inside

When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.

Adding a border pushes down contents

UPDATE:

You can prevent this movement by adding margin: 0; to the style of your p tag. See below for an explanation of how and why this happens.

The reason your p tag gets pushed down is because of margin collapsing (or, rather, margins not collapsing when you set a border).

See this page for a more in-depth explanation of how it works. From that page:

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Basically, your margins are getting collapsed by the browser when you don't have a border set, yet they are calculated when you do set that border.

For ways to prevent the browser from collapsing margins, see this question. From that question (first part originally quoted from this other question):

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

.parent { padding-top: 1px; margin-top: -1px; }

Place border in a 100% height and width div - right and bottom border outside

By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

There's a CSS property called box-sizing which allows you to adjust this property. Adding box-sizing: border-box to .div-with-border should fix this for you!

Take a look at the link above. They have a live example that demonstrates box-sizing.