How to perform arithmetic operations in CSS?

Question

I want to know how can I achieve an arithmetic operation in CSS.

For example: I want to align two divs side by side each having width of 50% and I w

Answer 1

Use box-sizing: border-box; on your

to make borders part of the width calculation. The default value for box-sizing is content-box, which does not include padding or border in the width attribute.

#container {
  border: 1px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}

Paul Irish comments on the use of calc() and suggests using border-box because it better matches our mental model of "width".

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...