我在vim中的colorscheme有问题:
替代文字http://new.tinygrab.com/ca56d2c7a8e13f7077012bece6abd90e.png
行号太靠近代码了.如何增加行数右边距的宽度?
我是网页设计的新人.我使用CSS和HTML创建了我的网页布局,如下所示.问题是即使我将边距设置为0,上边距也没有设置为0并留下一些空间.我怎样才能清除这个空白区域?
屏幕截图的问题

样式表
<style type="text/css">
body{
margin:0 auto;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
</style>
Run Code Online (Sandbox Code Playgroud)
HTML
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
这是整个文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
margin: 0 !important;
padding: 0 !important;
}
body{
margin:0; padding: 0;
background:#F0F0F0;}
#header{ …Run Code Online (Sandbox Code Playgroud) 我一直在尝试为链接按钮实现margin-top,但它根本不起作用.我还尝试了'p'和'a'标签的内联样式.
有3个li元素,我没有在这里发布整个代码,因为它与first li元素相同.
HTML
<div id="services">
<ul>
<li>
<img src="images/service.png" alt=""/>
<p class="service-heading">Service 1</p>
<p>Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Sit sociis. Augue tempor mid rhoncus nec nisi ac pulvinar dictumst</p>
<p><a href="#">Read More</a></p>
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
这是上面的html的css代码.css代码:
#services{
background-color: #afc1ff;
height: 490px;
padding: 5%;
border-top: 5px solid #4972ff;
border-bottom: 5px solid #4972ff;
}
#services ul{
/* background-color: red; */
margin: 0;
padding-left: 10px;
padding: 0 0 0 50px;
}
#services ul li{
display: inline-block;
width: …Run Code Online (Sandbox Code Playgroud) 我认为这是一个艰难的.
我使用网格系统float:left.我可以用它重写它display:inline-block,但这不会改变一件事.
假设我们有两列:
<div class="row">
<div class="column">
<!-- some content here -->
</div>
<div class="column">
<!-- some content here -->
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
如果我将一个带有margin-top的块元素放入其中(比如<h1>),我之前会对内容进行非折叠边距.这是正常的,因为浮动元素(或显示:内联块)总是如此.
但我希望利润率下降.我尝试了很多工作,但似乎每个将两个元素放在一起的CSS会破坏上面内容的折叠边距.
我知道,我可以使用CSS来获取元素的第一个子元素以摆脱margin-top.但在这种情况下,它将不适用,因为内容是使用CMS构建的,并且在我到达元素之前可能存在任意级别的元素深度.
没有JavaScript,有没有办法做到这一点?
小提琴:http://jsfiddle.net/HerrSerker/ZSV3D/
你可以看到,保证金顶部h1和保证金底部.header不会崩溃.这是一个由手段float:left的.column.
.header {
font-size: 24px;
background: rgba(0,255,0,0.1);
}
h1 {
background: silver;
margin-bottom: 50px;
font-size: 28px;
}
.column {
float: left;
width: 50%;
background: rgba(255,0,0,0.1);
}
h2 {
background: gold;
margin-top: 50px;
font-size: 24px; …Run Code Online (Sandbox Code Playgroud)我检查了MDN,看看有什么方法可以获得margin属性的自动值,它说:"auto被替换为一些合适的值,例如它可以用于块的居中."
但是什么是合适的价值,适合什么?
我尝试了一些实验,我看到如果我添加margin-left:auto,容器会向右移动(就像浮动到右边):
#container {
background: red;
width: 120px;
margin-left: auto;
}
Run Code Online (Sandbox Code Playgroud)
这是否意味着添加保证金自动实际上就像"占用所有可用空间"?当你添加左右边距时,它会使div居中,因为它试图从左边和右边占据所有空间?
我遇到了许多涉及负边距的布局技术,例如侧边栏定位的经典技巧.似乎这些技术可以很容易地应用于相对定位.
所以不是这样的:
.sidebar {
margin-left:-600px;
}
Run Code Online (Sandbox Code Playgroud)
一个人会这样做:
.sidebar {
position:relative;
left:-600px;
}
Run Code Online (Sandbox Code Playgroud)
看起来相对定位甚至可能在垂直方向上更清晰,因为上边距操纵可能会受到边际问题崩溃等因素的影响.
一个在另一个上有任何优势,还是它们几乎相同?
谢谢-
示例HTML + CSS:
<html>
<body style="padding: 0; margin: 0;">
<div style="float: right;">first</div>
<div style="margin-top: 2em;">second</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
所需的行为:将firstDIV浮到窗口的右上角. 实际行为:它漂浮在所需位置下方2em处. 原因: 保证金崩溃.
尽管发现了问题,但我能提出的解决方案感觉就像黑客一样:
body风格 margin: -1px 0 0 0; border-top: 1px solid;.<div style="height: 1px; margin-bottom: -1px;"></div>之前插入first<div>在first和之间插入上面的内容second是否有一种清洁,惯用的方法来避免这个问题?
我最近深入研究了FPDF,而我似乎并不理解的是 - 为什么没有办法设置底部保证金?有从顶部,左侧和右侧设置边距的功能,但不能从底部设置边距.
我现在假设我误解了关于FPDF如何工作的基本和概念,但我不知道可能是什么.
所以要减少它:
是否可以在FPDF中定义固定的底部边距?
我正在创建一个网站.我编写了html部分,现在我正在编写样式表.但是我的标题总是有一些空间.我无法删除它.
我的HTML和CSS代码如下.
<header>
<h1>OQ Online Judge</h1>
<form action="<?php echo base_url();?>/index.php/base/si" method="post">
<label for="email1">E-mail : </label><input type="text" name="email" id="email1">
<label for="password1">Password : </label><input type="password" name="password" id="password1">
<input type="submit" name="submit" value="Login">
</form>
</header>
Run Code Online (Sandbox Code Playgroud)
这是我的HTML代码.
body{
margin: 0px;
padding: 0px;
}
header{
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
}
Run Code Online (Sandbox Code Playgroud)
这是我的css代码.
margin ×10
css ×8
html ×5
layout ×2
css-float ×1
css-position ×1
fpdf ×1
grid-layout ×1
html-heading ×1
html5 ×1
macvim ×1
pdf ×1
php ×1
space ×1
vim ×1