Please Note: I've been working on extracting code from a WordPress environment running the Salient theme. As of now, I haven't been able to simplify the issue to its core form. There is a possibility that I might figure it out myself, but I welcome any feedback from the community throughout this process. Hopefully, this question will provide valuable insights.
The problem I'm facing can be outlined as follows:
I am striving for better control over how my content appears on the screen, and it seems like there's something about CSS that I'm not grasping. I experimented with the "box-sizing: border box" property to include padding and borders in the total width calculation of an element. I have shared links below to illustrate the state of the input and span elements:
Highlight of Input Element in Chrome Devtools
Content Area of Span Element in Chrome Devtools
My assumption is that the box-sizing approach isn't effective due to a margin-related concern. It's likely that the "margin-left" property has impacted the overall content area, causing the content to extend beyond the span element boundaries. However, my goal is to confine the input element within the span element.
Additions to HTML and CSS courtesy of Lucien Dubois
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.contact-fields input, textarea{
margin-left: 12px;
}
.wpcf7-form-control-wrap {
display: block !important;
position: relative;
}
div, span, h5, p {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin-right: 0;
border: 0
}
h5
{
font-family: Raleway;
line-height: 16px;
margin-bottom: 7px;
color: #444;
letter-spacing: 0px;
font-weight: 600;
}
.form-label {
clear: both;
font-size: 20px
}
h5 {
vertical-align: baseline;
font-style: inherit;
outline: 0;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-left: 0;
border: 0
}
.first-name, .last-name {
display: inline-block;
width: 40%;
margin-right: 9px;
}
.first-name input, .last-name input {
width: 62%;
}
input {
margin-bottom: 20px;
margin-top: 5px;
}
<div class="contact-fields">
<div class="name-section">
<div class="first-name">
<h5 class="form-label"> First Name:</h5>
<p>
<span class="wpcf7-form-control-wrap fname">
<input type="text"
name="fname"
value=""
size="40"
maxlength="50"
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field"
aria-required="true"
aria-invalid="false">
</span>
</p>
</div>
<div class="last-name">
<h5 class="form-label"> Surname:</h5>
<p>
<span class="wpcf7-form-control-wrap lname">
<input type="text"
name="lname"
value=""
size="40"
maxlength="50"
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field"
aria-required="true"
aria-invalid="false"></span>
</p>
</div>
</div>
</div>