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

ReactJS creating trouble with incorporation of CSS in Table

Attempting to superimpose a CSS triangle arrow onto a Google Map

Steps for positioning a logo to the left and navigation to the right with HTML and CSS

Identify the element with the active class name as the primary focus

Using CSS to position a pair of divs containing text and images side by side

Adjusting background position using incremental changes through JavaScript

Lists within lists and the use of percentages

What methods can I utilize to increase the speed of my JavaScript animation?

Steps to create a clickable button wrapper label in React

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

Conceal the scroll bar while still allowing for scrolling functionality

The content contained within the .each loop within the click event is only executed a single time

What steps do I need to take to design a menu?

Arranging Bootstrap Grids within Laravel

struggling to insert submit button within input field in bootstrap 4.3.1

Ways to emphasize the four edges of a table cell using border-collapse collapse

The CSS Validator does not recognize the CSS pointer-events and appearance properties

The Art of Determining the Text's Baseline

The iPhone display scaling issue is causing difficulty viewing the entire website

Display a text over a full-screen HTML5 video