Child div with border constraint on browser shutdown

#container{width:100px; height:200px; border:solid 1px #000;}

#container div{float:left;}

#a, #b{width:50px; height:50px;}

#c, #d{width:48px; height:48px; border:solid 1px #000;}


// no border

<div id="container">
    <div id="a"></div>
    <div id="b"></div>


// with border

<div id="container">
    <div id="c"></div>
    <div id="d"></div>


I have 2 divs inside a container, both float left

However, if I add a border to small divs,

When the browser zooms out, the div will move down and destroy the layout

I am trying borderless and the layout works fine without border.

Does anyone know how to achieve this with a border div?

Here is a violin


source to share

1 answer

you need to install:

Box-sizing: Border-box;


he says the border grows on the inside, not the outside, so it doesn't change the layout.
also change the window width to 50px.

PS: jsfiddle doesn't recognize this property, but displays it as needed.



All Articles