【发布时间】：2017-11-03 04:58:15
【问题描述】：
嘿，我在 php 中创建了一个网页电子邮件联系表单，然后想将其添加到原始网页，但决定将页面中的所有 html 放入 php 文件并运行 php 文件。但两边似乎有这种奇怪的、不一致的空白，即 margin:0;不会摆脱，html中的sae代码没有任何空格（只是奇怪的文本，因为没有php）Heres a fiddle of that difference。空白也随着屏幕变小......然后再次变大，然后再次变小,Here is an imgur album in album of what the screen looks like as you shrink it's width (original screen size 1200px)。我不知道为什么会这样。
旁注：实际的电子邮件功能还不是完美无缺的，但我现在不专注于此。
编辑：基本上页面两边都有空格，我想去掉它。边距 0 不起作用，并且我的 index.php 文件中的相同代码在作为 HTML 放入 jsfiddle 时没有空格，所以我想也许它需要为 php 做另一种方式。
我还注意到，当我检查它时，空格是身体的一部分？？
PHP：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<?php include ('form_process.php');?>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" type="text/css" href="css/email.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div id="navbar" class="li flex-container nav hidden-xs">
<a class="nav-link flex-item " href="index.html#bottom">PHOTOGRAPHER</a>
<a class="nav-link flex-item" href="Portfolio.html">PORTFOLIO</a>
<a class="hplogo-a flex-item hidden-xs hidden-sm" href=""><img id="logo" src="Images/WHITELOGO.png" alt=""></a>
<a class="nav-link flex-item" href="Investment.html">INVESTMENT + FAQ</a>
<a class="nav-link flex-item" href="#">BLOG</a>
</div>
<div id="myNav" class="overlay hidden-sm hidden-md hidden-lg">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="index.html#bottom">PHOTOGRAPHER</a>
<a href="Portfolio.html">PORTFOLIO</a>
<a href="javascript:window.location.reload();">INVESTMENT + FAQ</a>
<a href="#">BLOG</a>
</div>
</div>
<span id="toggle" style="font-size:30px;cursor:pointer" onclick="openNav()" class="hidden-sm hidden-lg hidden-md popup">☰ </span>
<div class="container top email">
<p class="eramble eramble1 col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10 "> Finding a photographer is a delicate process and you really need to trust your instinct. You put your trust and faith in us to capture your most valuable memories and to tell your story through our camera. You're here because you feel that my work can represent and accentuate the love between you and your fiancé.</p>
<p class="eramble eramble2 col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">If this is the case, I would love to hear more about you and about your wedding day. So, lets start here! </p>
<div class="email_form">
<form id="contact" action="<?= $_SERVER['PHP_SELF'];?>" method="post">
<div class="form-group row">
<div class="col-sm-5 col-xs-5 col-xs-offset-1 col-sm-offset-1">
<label for="fname">Name*</label>
<input class="form-control" id="fname" placeholder="Your first name" type="text" tabindex="1" size="30" name="fname" value="<?= $fname ?>" autofocus>
<label for="fname" style="font-size:9px; font-weight:normal; ">First Name</label>
<span class="error"><?= $fname_error?> </span>
</div>
<div class="col-sm-5 col-xs-5">
<label class="visuallyhidden" for="lname">lNAME</label>
<input class="form-control" id="lname" placeholder="Your last name" type="text" name="lname" value="<?= $lname ?>" tabindex="4" >
<label for="lname" style="font-size:9px; font-weight:normal; ">Last Name</label>
<span class="error"><?= $lname_error?> </span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 col-xs-10 col-xs-offset-1 col-sm-offset-1">
<label for="email">Email Address*</label>
<input class="form-control" id="email" placeholder="Your Email Address" type="text" name="email" value="<?= $email ?>" tabindex="2" >
<span class="error"><?= $email_error?> </span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-2 col-xs-2 col-xs-offset-1 col-sm-offset-1">
<label for="phone1">Phone*</label>
<input class="form-control" size="4" maxlength="3" id="phone1" placeholder="Your Phone Number" type="text" name="phone1" value="<?= $phone1 ?>" tabindex="3" >
<label for="phone1" style="font-size:9px; font-weight:normal; ">(###)</label>
<span class="error"><?= $phone1_error?> </span>
</div>
<div class="col-sm-2 col-xs-2">
<label class="visuallyhidden" for="phone2">Phone*</label>
<input class="form-control" size="4" maxlength="3" id="phone2" placeholder="Your Phone Number" type="text" name="phone2" value="<?= $phone2 ?>" tabindex="3" >
<label for="phone2" style="font-size:9px; font-weight:normal; ">###</label>
<span class="error"><?= $phone2_error?> </span>
</div>
<div class="col-sm-2 col-xs-2">
<label class="visuallyhidden" for="phone3">Phone*</label>
<input class="form-control" size="5" maxlength="4" id="phone3" placeholder="Your Phone Number" type="text" name="phone3" value="<?= $phone3 ?>" tabindex="3" >
<label for="phone3" style="font-size:9px; font-weight:normal; ">####</label>
<span class="error"><?= $phone3_error?> </span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 col-xs-10 col-xs-offset-1 col-sm-offset-1">
<label for="message">Message*</label>
<textarea placeholder="Type your Message Here...." class="message1 form-control" rows="5" id="message" name="message" tabindex="5" ><?php if(isset($_POST['message'])){
echo htmlentities ($_POST['message']); }?></textarea>
<span class="error"><?= $message_error?></span>
</div>
</div>
<div >
<button class="btn-default btn rbutton col-xs-offset-1 col-sm-offset-1" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</div>
<div class="success"><?= $success;?></div>
</form>
</div>
</div>
<div class="container bottom faq">
<h1>FAQ</h1>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
<h3 class="question col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur.</h3>
<p class="answer Lastanswer col-xs-offset-1 col-sm-offset-1 col-xs-10 col-sm-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sint voluptatibus libero unde ipsam, rem quod nesciunt vel amet totam quia, enim, doloribus esse iure, ad. Nesciunt suscipit molestias voluptates explicabo iure error, sapiente qui quam, laboriosam praesentium expedita doloribus magnam. Non aliquam, voluptatum earum odio cumque sapiente aut, necessitatibus</p>
</div>
<div class="footer">
<footer class="foot">
<h6> AVAILABLE WORLDWIDE</h6> <h6> 2049671111</h6>
<a href="#">MRPOOPYBUTTHOLE@GMAIL.COM</a>
</footer>
</div>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
CSS：
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 1-Nov-2017, 8:56:13 PM
Author : BrownBoii333
*/
.error{
color:red;
}
.success{
color: #ff9966;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.visuallyhidden{
visibility: hidden;
}
.rbutton{
border-radius: 20px;
margin-bottom: 40px;
}
body{
margin:0;
overflow-x: hidden;
font-family: Calibri;
font-style: normal;
font-variant: normal;
}
.eramble2{
margin-bottom: 20px;
}
.nav{
left:50%;
transform:translateX(-50%);
position: absolute;
list-style-type: none;
display: inline;
z-index: 2;
text-align: center;
}
.resize-anchor{
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a{
display: inline-block;
height: auto;
width: 200px;
min-width: 200px;
}
.email_form{
margin-bottom: 40px;
}
a:hover{
color:#D1946F;
text-decoration: none;
}
a:link{
color:#D1946F;
text-decoration: none;
}
.navlink, .hplogo-a{
text-align: center;
display:inline-block;
margin-left: 50px;
margin-right: 50px;
padding:0;
}
.nav-link{
color:white;
text-decoration: none;
white-space: nowrap;
text-align: center;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
margin-top: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
.li{
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 20px;
}
img{
width: 100%;
}
.top{
background: #999;
width: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url('http://sazan.me/wp-content/uploads/2015/07/26.jpg');
}
.bottom{
background: #333;
width: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url('https://article.tbdress.com/uploads/2013/06/black-and-white-wedding-theme-1.jpg');
}
.foot{
text-align: center;
color: #D1946F;
margin:25px 0 25px 0;
}
.eramble{
text-align: center;
font-size: 20px;
color:white;
}
.eramble1{
margin-top: 150px;
}
.question{
color: #D1946F;
font-size: 38px;
}
.answer{
color: white;
font-size: 18px;
}
.Lastanswer{
margin-bottom: 40px;
}
.popup{
position: absolute;
z-index: 4;
color: white;
right: 12px;
margin: 5px 5px 0 0;
}
.carousel-indicators{
z-index: 3;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 4;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 15%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
form_process.php：
<?php
// define variables and set to empty values
$fname_error = $lname_error = $email_error = $phone1_error = $phone2_error = $phone3_error = $message_error="";
$fname = $lname = $email = $phone1 = $phone2 = $phone3 = $message = $success = "";
//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["fname"])) {
$fname_error = "Name is required";
} else {
$fname = test_input($_POST["fname"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$fname)) {
$fname_error = "Only letters and white space allowed";
}
}
if (empty($_POST["lname"])) {
$lname_error = "Name is required";
} else {
$lname = test_input($_POST["lname"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$fname)) {
$lname_error = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$email_error = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
if (empty($_POST["phone1"])) {
$phone1_error = "required";
} else {
$phone1 = test_input($_POST["phone1"]);
// check if e-mail address is well-formed
}
if (empty($_POST["phone2"])) {
$phone2_error = "required";
} else {
$phone2 = test_input($_POST["phone2"]);
// check if e-mail address is well-formed
}
if (empty($_POST["phone3"])) {
$phone3_error = "required";
} else {
$phone3 = test_input($_POST["phone3"]);
// check if e-mail address is well-formed
}
if (empty($_POST["url"])) {
$url_error = "";
} else {
$url = test_input($_POST["url"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$url)) {
$url_error = "Invalid URL";
}
}
if (empty($_POST["message"])) {
$message_error = "Message is required";
} else {
$message = test_input($_POST["message"]);
}
if ($fname_error == '' and $lname_error == '' and $email_error == '' and $phone1_error == '' and $phone2_error == '' and $phone3_error == '' and $url_error == '' ){
$message_body = '';
unset($_POST['submit']);
foreach ($_POST as $key => $value){
$message_body .= "$key: $value\n";
}
$to = 'thetalhasuboor@gmail.com';
$subject = 'Contact Form Submit';
if (mail($to, $subject, $message_body)){
$success = "Message sent, thank you for contacting us!";
$fname = $lname = $email = $phone1 = $phone2 = $phone3 = $message = $url = '';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
【问题讨论】：
-
能否详细说明您的问题？你到底想要什么？
-
我想去掉我的 php 文件两边的空白。
-
所以您不想在我们的页面中出现两边的间距？
-
不，我不想要边距。我想满足于从一个边缘到另一个边缘。
-
form_process.php的内容是什么？在浏览器中打开源代码视图并进行可视化检查，有时可以明显看出问题所在。
标签： php html css twitter-bootstrap