Variation in element widths and CSS widths

Question

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px.
However, the applied CSS sets the width to 207px for this element.
The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify change sources?
I'm looking for a tool that can alert me when specific properties are altered.
Thank you in advance for any assistance

These details are extracted from FF Inspector in two different states:
Element is input[type=text]

<input aria-invalid="true" class="invalid" name="jform[university]" id="jform_university" value="" required="" aria-required="true" type="text">

State 1: Width = 225px

*::-moz-selection {
                background: #F9924F none repeat scroll 0% 0%;
                color: #FFF;
            }
            element {
            }
            select, textarea, input[type="text"], ...
            ...... continued ...........
            html {
                font-size: 100%;
            }

State 2: Width = 207px

*::-moz-selection {
                background: #F9924F none repeat scroll 0% 0%;
                color: #FFF;
            }
            element {
            }
            select, textarea, input[type="text"], ...
            ...... continued ...........
            html {
                font-size: 100%;

css twitter-bootstrap width

Answer 1

Answer №1

It appears that there is a discrepancy between the width:207px set on your input and the actual 225px width displayed on the page.

This issue likely stems from the css box model computations.

The default mode, box-sizing:content-box, calculates the size of an element based solely on its content. However, you may want to consider using box-sizing:border-box for more natural behavior. To implement this change, adjust the box-sizing property on the element.

https://i.stack.imgur.com/7Roxl.jpg
_{(source: binvisions.com)}

content-box

In the content-box model, the width/height is determined only by the element's content, with padding, border-width, and margin extending beyond those dimensions.

Therefore, when you specify width:207px in this model, it interprets as "the content should be 207px wide," considering padding and border-width additional to that measurement.

border-box

In contrast, the border-box model includes padding and border-width in the calculation, resulting in the sum of content + padding + border-width as the total width.

If you set width:207px with padding:8px and border-width:1px, the available space for content would be 189px (207px - 2*8px - 2*1px).

solving the problem

To address this issue, you can apply the following:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    padding: 0 8px;
    border: 1px solid #CACACA;
}

Since you are currently in the content-box mode, the computed width will be 207px + 2*8px + 2*1px, resulting in the observed 225px.

To resolve this, apply box-sizing:border-box to the element. However, note that this adjustment may impact other styles. Alternatively, opting for width:189px might be a better solution.

Answer 2

It appears that there is a discrepancy between the width:207px set on your input and the actual 225px width displayed on the page.

This issue likely stems from the css box model computations.

The default mode, box-sizing:content-box, calculates the size of an element based solely on its content. However, you may want to consider using box-sizing:border-box for more natural behavior. To implement this change, adjust the box-sizing property on the element.

https://i.stack.imgur.com/7Roxl.jpg
_{(source: binvisions.com)}

content-box

In the content-box model, the width/height is determined only by the element's content, with padding, border-width, and margin extending beyond those dimensions.

Therefore, when you specify width:207px in this model, it interprets as "the content should be 207px wide," considering padding and border-width additional to that measurement.

border-box

In contrast, the border-box model includes padding and border-width in the calculation, resulting in the sum of content + padding + border-width as the total width.

If you set width:207px with padding:8px and border-width:1px, the available space for content would be 189px (207px - 2*8px - 2*1px).

solving the problem

To address this issue, you can apply the following:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    padding: 0 8px;
    border: 1px solid #CACACA;
}

Since you are currently in the content-box mode, the computed width will be 207px + 2*8px + 2*1px, resulting in the observed 225px.

To resolve this, apply box-sizing:border-box to the element. However, note that this adjustment may impact other styles. Alternatively, opting for width:189px might be a better solution.

Variation in element widths and CSS widths

Answer №1

content-box

border-box

solving the problem

Similar questions

Switch div and expand/shrink the rest

What is the best way to arrange a bootstrap .container?

Prevent the hover() effect from affecting all div elements at once

Having trouble loading NEXT JS images when the file path is stored in a variable?

JavaScript utilizing an API to retrieve specific data values

Experiencing difficulties with positioning text beside an image

Although PhoneGap resolution remains consistent, the outcomes may vary

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

Switch up the font style of the title element

Style formatting is applied to the addition of fresh content on a webpage

"Troublesome issue with Bootstrap push and pull functionality not functioning correctly

What is the best way to include start and end labels on Bootstrap's progress bars?

Creating a larger spinning div using CSS3 animation

How can I create a one-column layout in CSS grid where one element automatically fills the remaining space after the other elements have taken their own auto widths?

Creating a border indentation for a table row using the <tr> tag

Issue with border in a nested table within an HTML table

Update the div element without needing to reload the entire page

Adding Bootstrap to container-specific styling in SCSS

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

Internet Explorer 8 comes with excess padding at the top and bottom, causing un