Css html页面上的白色框架约为50px宽的don';我不知道它从哪里来
文档右侧有一列宽约50px,我不知道它来自何处,我已将html和css检查了三倍,但找不到它的生成位置 这是我的html:Css html页面上的白色框架约为50px宽的don';我不知道它从哪里来,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,文档右侧有一列宽约50px,我不知道它来自何处,我已将html和css检查了三倍,但找不到它的生成位置 这是我的html: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="?.?">
<meta name="author" content="?.?">
<meta property="og:title" content="Sitio Web de Balam Tech">
<meta property="og:image" content="assets/img/balamtech-logo.png">
<meta property="og:site_mame" content="Balam Tech">
<meta property="og:description" content="?.?">
<title>Balam Tech - Inicio</title>
<link rel="stylesheet" type="text/css" href="assets/libs/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<a href="index.html" class="navbar-brand"><img class="topbar-thumbnail" src="assets/img/balamtech-logo.png" alt="Balam Tech Logo"> Balam Tech</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".mainNavbar">
<span class="glyphicon glyphicon-th-large"></span>
</button>
<div class="collapse navbar-collapse mainNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active-tab"><a href="#quien">¿Quiénes somos?</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contact">Contáctanos</a></li>
<li><a href="#login">Login</a></li>
<li><a href="#registrate">Regístrate</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="jumbotron jumbotron-main-page" role="main">
<div class="container space-top-jumbotron-main-page text-center">
<h1>Balam Tech</h1>
<p>Productos y Servicios de Primera Calidad</p>
<a href="#" class="btn btn-primary btn-lg">Contáctanos</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container" id="quien">
<div class="col-md-12">
<h2 class="text-center">¿Quiénes somos?</h2>
<div style="height: 40px;"></div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-3">
<img src="assets/img/balamtech-logo.png" alt="logo de Balam Tech" title="Balam Tech" class="img-logo-main-page">
</div>
<div class="col-md-9">
<h3>Balam Tech</h3>
<article class="text-main-page">
<p><b>Balam Tech</b> es una empresa que pertene a Grupo San Martín.</p>
<p><b>Balam Tech</b> se dedicada a prestar servicios de desarrollo de software web y
a la venta de productos de software genérico. Más Información en la sección de servicios y productos.</p>
<p>Puedes ponerte en contacto con nosotros al correo
<b><a href="mailto:info@balamtech.com">info@balamtech.com</a></b></p>
</article>
<a href="#" class="btn btn-lg btn-primary pull-right">Leer Más</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div style="height: 70px;"></div>
<div class="second-tier">
<div class="row">
<div class="container">
<div class="col-md-12">
<h2 class="text-center">Nuestros Servicios</h2>
<div style="height: 40px;"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-3">
<h3 class="text-center">Software Web a la Medida</h3>
<article class="text-main-page">
<p>Nosotros desarrollamos <b>Software Web</b> con los estándares más altos, con
tecnología de punta y con escalabilidad horizontal y vertical.</p>
<p>El <b>Software Web</b> te ofrece la ventaja de ser compatible con muchos de los dispositivos
que se utilizan hoy en día. ¿Smartphones, tabletas, ipads?, No te preocupes, te tenemos
cubierto.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Desarrollo de Portales y Plataformas Web</h3>
<article class="text-main-page">
<p>Hoy en día los portales y plataformas empresariales y de negocios son un indicio del
grado de calidad y profesionalidad que una empresa, compañia o institución posee.</p>
<p>Nuestros desarrolladores y diseñadores se encargan de que tu empresa tenga una imágen
estrictamente profesional y seria en la Web.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Diseño de Correos Electrónicos</h3>
<article class="text-main-page">
<p>Siempre hay una razón para mandar un correo a un cliente, a un contacto, a una empresa, etc.</p>
<p>Se vuelve un problema poder visualizar de manera uniforme un correo al haber tantos dispositivos
y resoluciones diferentes en el mercado.</p>
<p>Nosotros te ofrecemos una solución que las grandes empresas internacionales utilizan: Diseño de Correo Electrónico Responsivo.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Desarrollo de Aplicaciones Móviles</h3>
<article class="text-main-page">
<p>Hoy en día, mas del 50% de la audiencia que visita un sitio o aplicación web
lo hace desde un dispositivo móvil, es decir un smartphone o tableta.</p>
<p>El diseño responsivo es una solución bastante útil, pero muchas veces, es
el grado de complejidad de el sitio o aplicación requiere de mayor especialización,
para el cual te ofrecemos otra solución: <b>Aplicaciones Móviles.</b></p>
</article>
</div>
</div>
</div>
<div style="height: 30px;"></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="assets/img/techs.png" class="img-tech-main">
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div style="height: 50px;"></div>
<h2 class="text-center">Contáctanos</h2>
<hr>
<div style="height: 40px;"></div>
<div class="col-md-4">
<img src="assets/img/androidmessage.png" class="icon-message pull-left">
</div>
<div class="col-md-8">
<form method="post" role="form" class="text-center">
<div class="form-group">
<label class="control-label" for="uname">Nombre</label>
<input type="text" class="form-control input-lg" id="uname" name="uname" placeholder="nombre">
</div>
<div class="form-group">
<label class="control-label" for="uemail">Correo</label>
<input type="email" class="form-control input-lg" id="uemail" name="uemail" placeholder="correo electrónico">
</div>
<div class="form-group">
<label class="control-label" for="uempresa">Empresa</label>
<input type="email" class="form-control input-lg" id="uempresa" name="uempresa" placeholder="empresa">
</div>
<div class="form-group">
<label class="control-label" for="umensaje">Mensaje</label>
<textarea class="form-control" id="umensaje" name="umensaje" placeholder="mensaje..."></textarea>
</div>
<button type="submit" class="btn btn-success btn-lg pull-right">Enviar Mensaje</button>
</form>
</div>
</div>
</div>
<footer class="footer">
</footer>
<script src="assets/libs/js/jquery.min.js"></script>
<script src="assets/libs/js/bootstrap.min.js"></script>
</body>
</html>
下面是它的外观图片:
如果有人知道为什么会出现这个框架,请告诉我如何修复它 您是否包含CSS重置
(我在屏幕截图中没有看到白色边框)浏览器会自动向正文添加边距,因此您需要通过将边距设置为0来删除边距
body {
margin: 0;
}
这将删除垂直滚动条
<> >为了找到导致空白区域的右边,可以使用浏览器内置工具。在Firefox中,您可以右键单击页面并选择“Inspect element”以获取有关它的信息,然后选择difference element以确定元素开始改变大小的位置
如果你想让我找到它,最好有一个链接到这个页面。我尝试了你的代码,但没有得到与截图相同的结果。这是一个非常可怕的CSS量,如果你只是发布一个链接,它会更容易阅读-但我猜,对于你的一个元素,除了
宽度:100%
之外,你正在使用填充或边距
,这会增加额外的空间这个效果。只需转到inspector查看问题所在-右键单击并检查chrome中的元素。你在不同的浏览器(即firefox)中获得相同的效果吗?在firefox和ie上获得相同的效果。唯一的区别是ie的白色边框比其他浏览器小得多。但仍然有一个小框架。看,右边有一个空白,那是白色框架,我的意思是,它不应该在那里。除非你能指出重置中解决问题的部分,否则这不是答案。
body {
margin: 0;
}