English
Menu

Web Technology Basics

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}

For the element styled with the CSS above, which of the following is the width from the outer edge of the left border to the outer edge of the right border?

  1. A200px
  2. B224px
  3. C264px
Show answer and explanation

Answer: B. 224px

In the CSS box model, an element consists of the content, the padding, the border and the margin, layered from the inside out. With box-sizing: content-box (the default), width is the width of the content only, so the width to the outside of the border is 200 + 10 × 2 + 2 × 2 = 224px. The margin is the space outside the border and forms the gap to other elements. With box-sizing: border-box, width includes everything up to the border, and the content width becomes 200 − 24 = 176px.

  • A. This is the content width only. With content-box, the padding and border are added outside width.
  • B. Correct. 200 + 20 + 4 = 224px.
  • C. This also adds the left and right margins, 20 × 2 = 40px. The margin is the space outside the border.
Practice this topic Back to topic

Books on Web Technology Basics Ad

As an Amazon Associate I earn from qualifying purchases.

More Web Technology Basics questions

  1. Assume there are no other style specifications. In the HTML above, which of the following is the color of the text "Hello"?
  2. In the processing a browser does before showing the first screen (the critical rendering path), a <script src="app.js"> written without attributes inside <head> makes the HTML parser stop at that point. Which of the following correctly describes the behavior when the defer attribute is added to this element?
  3. When the JavaScript above is run in a browser, which of the following is the order in which the characters are shown on the console?
  4. Under the browser's same-origin policy, which of the following URLs is considered to have the same origin as https://www.example.com/app/index.html?
  5. JavaScript on a page at https://app.example.com uses fetch to send a POST request with a body of Content-Type application/json to https://api.example.net/orders. Which of the following correctly describes how CORS behaves in this case?