-1

So i wrote this code with border-spacing: border-box (which some said was the solution) but still the boxes are exceeding from the right side of the padding.

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
    <div class="main">
        <form action="">
            <header>
                <h1 class="up">Contact Form</h1>
                <h4 class="up">Please fill all the texts in the fields.</h4>
            </header>
            <section>
                <p class="name">Your name: <input type="text" name="name" placeholder="Your Full Name"></p>
                <p class="email">Your Email: <input type="email" name="email" id="email"
                        placeholder="Valid Email Address">
                </p>
                <p class="message">Message: <textarea name="message" id="message" cols="30" rows="10"
                        placeholder="Your message to us"></textarea></p>
                <p class="subject">Subject: <input type="text" name="subject" id="subject" placeholder="Job Inquiry">
                </p>
                <input type="submit" value="Send">
            </section>
        </form>
    </div>
</body>

</html>

css:


*{
    border-spacing: border-box;
    
}


body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 12px;
    margin: 15px 30px;
    font-size: 17px;
}

.main {
    background-color: #f2f2f2;
    
}

header{
    background-color: #008325;
    border-radius: 5px;
    margin: none;
    padding: 30px;
    color: #f2f2f2;
}

section {
    padding: 15px;
}

input[type="text"], textarea, input[type="email"] {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    margin: 2px;
    text-overflow: auto;
}

input[type="submit"] {
    padding: 12px;
    border-radius: 5px;
    border: none;
    background-color: #005e1b;
    color: #f2f2f2;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #008325;
}

The input texts just don't come inside the padding

Shrey
  • 1
  • 1

1 Answers1

1

Add box-sizing: border-box to your * {} declaration.

*{
    border-spacing: border-box;
    box-sizing: border-box;
}
Daniel Lee
  • 149
  • 3
  • Btw The border-spacing CSS property sets the distance between the borders of adjacent cells in a . This property applies only when border-collapse is separate. There is no "border-box" value. https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing?retiredLocale=de
     – Chris Schober Nov 02 '22 at 02:23
  • Thanks for that. That's what I assumed also, but I included it because that's what the original poster had in his CSS. – Daniel Lee Nov 02 '22 at 02:32
  • Yeah i'm sure you knew. Just wanted to be clear that there is no border-spacing: border-box if someone copy this code :) – Chris Schober Nov 02 '22 at 02:41