Geek Answers Handbook

Should borders affect layout?

Using a basic layout such as ...

<div class="span-23 last" id="main">
    <div class="span-18" id="column1">
        <div class="clear span-10" id="body1"> </div>
        <div class="span-6 prepend-1 append-1" id="body2"> </div>
    </div>
    <div class="span-5 last" id="column2"> </div>
</div>

When I define a border on any of the divs, they either do not display or do not move the page elements. So borders actually occupy the number of px outside the div? If so, how can I get around this?

I noticed some mentions when using position:relative;, but this is not a problem here, as I use it widely in the usual way.

+5
source share
6 answers

Yes, borders occupy physical space. So, if you set the div to 100%, then give it a border of 1px, it will be 2px wider than the container in which it is located.

, ( "" ), .

, div , div.

.

:

, , blueprint.css

Blueprint.css . .

blueprint.css , . , div-span:

.span-border {border: 1px solid black;}
.span-8.span-border {margin-left: -1px; margin-right: 9px;}

10px 'gutter' . , , - span-x, , , .

+3

? . , quirksmode.org, ( ):

, . , . - , , . - . ( "" ). .

-, , , . , , . .

? , - . div:

.foo {
    width: 500px;
    padding: 5px;
    border: 1px solid blue;
}

div 512 , width , div. , .

: , box-sizing:

.foo {
    box-sizing: border-box;
    -moz-box-sizing: border-box;  /* FireFox requires the -moz- prefix */
    width: 500px;
    padding: 5px;
    border: 1px solid blue;
}

div 500 , .

jsFiddle

IE7 ( 1%).

+10

.
, outline.

.element{
    outline: 1px solid black;
}
+1

. .

0

CSS border padding, width height, width height border padding.

IE, , , IE < 6 quirks, border padding width height. outline border, .

0

... , div width: 20px border: 1px, 22px. - , div .

Here is an example: http://jsfiddle.net/pWB9U/

0
source

More articles:


All Articles