嘿，我已经在php中创建了一个网页电子邮件联系表单，然后想将其添加到原始网页，但决定只将页面中的所有html放入php文件，然后运行php文件。但是边上似乎有这种奇怪的，不一致的空白，边缘：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;
}
答案 0 :(得分：0)
如果我理解正确，您想要删除php tag之间的空格？
所以你可以试试css代码打击：
.form-control {margin:0;padding:0;}
您可以尝试删除<?php include ('form_process.php');?>，
这可能是有一些原因的。