CODEWITHSUNDEEP
css
David542
David542

Reputation: 110562

CSS percentage position minus a pixel

Is there a way to do the following in plain CSS?

.item {
    width: 85% - 1px;
}

In other words, I want the item to be 85% width, minus one pixel (ignore a border).

How would I accomplish this?

Upvotes: 2

Views: 63

Answers (3)

Dmitriy
Dmitriy

Reputation: 4501

maybe use box-sizing: border-box?

https://developer.mozilla.org/ru/docs/Web/CSS/box-sizing

div{
  height: 50px;
  width: 85%;
  border: 1px solid #f00;
  background: #ccc;
  margin: 15px auto;
}

.box-sizing{
  box-sizing: border-box;
}
<div></div>
<div class="box-sizing"></div>

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26444

There is a CSS calc function.

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

In your case, it would look like this

width: calc(85% - 1px);

Upvotes: 3

JDrost1818
JDrost1818

Reputation: 1126

Though it won't work in legacy browsers

width: calc(85% - 1px);

Upvotes: 3

Related Questions