CODEWITHSUNDEEP
htmlcssborderpixel
Aziz
Aziz

Reputation: 171

HTML and CSS. Bug: Appending 1px border when i make my scale more

Here is template:

http://jsfiddle.net/4gvy5/embedded/result/

The code: HTML

<div class="wrapper">
    <ul class="block-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    border: none;
}

.wrapper{
    width: 100%;
    padding: 40px 0;
    background: #e6e6e6;
}

.block-list{
    list-style: none;
    width: 940px;
    margin: auto;    
    overflow: hidden;
}

.block-list li{
    display: block;
    float: left;
    width: 298px;
    margin-right: 20px;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 20px 0;
    text-align: center;
}

.block-list li:last-child{
    margin-right: 0;
}

When I resizing window make it scale more - the last child goes down. I look in element panel and understand why it happened. All border(right or left) of li block increased to 1px. That's why width of blocks becomes 301px... But in normal scale, blocks have 300px. How can I solved this problem? Help please. I'll be thanks to everyone.

Upvotes: 1

Views: 2673

Answers (2)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

EDIT

Just use box-sizing:border-box; thanks to @Cthulhu

Box-sizing DEMO

Original Answer

That is not a bug. But it's always a problem for every web developer. The solution for that is when you add a border. you should also create a negative margin.

DEMO

if your border is

border: 1px solid green;

You must make a negative margin of -1px also to avoid that kind of problem.

margin:0 20px 0 -1px;

or you can simply reduce the width of your li.

Upvotes: 2

Piyush Marvaniya
Piyush Marvaniya

Reputation: 2552

Demo

Please try this css...

.block-list li:last-child {
    margin-right: 0;
    margin-top: -1px;
}

Upvotes: 0

Related Questions