边界外的 CSS - 开卷题库

小开

Put your div inside another div, apply the border to the outer div with n amount of padding/margin where n is the space you want between them.

小开

IsisCode gives you a good solution. Another one is to position border div inside parent div. Check this example http://jsfiddle.net/A2tu9/

UPD: You can also use pseudo element :after (:before), in this case HTML will not be polluted with extra markup:

.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}

Demo: http://jsfiddle.net/A2tu9/191/

小开

最佳答案

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>

Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.

You can read more about it here:
Border
Outline

小开

Way late, but I just ran into a similar issue.
My solution was pseudo elements - no additional markup, and you get to draw the border without affecting the width.
Position the pseudo element absolutely (with the main positioned relatively) and whammo.

See below, JSFiddle here.

.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}


.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}

小开

Try the outline property CSS Outline

Outline will not interfere with widths and lenghts of the elements/divs!

Please click the link I provided at the bottom to see working demos of the the different ways you can make borders, and inner/inline borders, even ones that do not disrupt the dimensions of the element! No need to add extra divs every time, as mentioned in another answer!

You can also combine borders with outlines, and if you like, box-shadows (also shown via link)

<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>

Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value:

div {border: inset solid 1px black};

But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.

Hope this helps

PS: I also was inspired to make this for you : Using borders, outlines, and box-shadows

小开

Why not simply using background-clip?

-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;

See:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip

小开

I shared two solutions depending on your needs:

<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>

example: https://codepen.io/danieldd/pen/gObEYKj