CSS中的边距

关键词

边距边框

摘要

作为一名刚入行的小白，虽然懂一些基础html，css理论知识，但对复杂的网页结构理解起来很困难，只会一些基础的前端的网页结构的搭建。如何成为一名专业的处理网站出现的问题的人，是一个漫长而又艰辛的过程。

作为一名刚入行的小白，虽然懂一些基础html，css理论知识，但对复杂的网页结构理解起来很困难，只会一些基础的前端的网页结构的搭建。如何成为一名专业的处理网站出现的问题的人，是一个漫长而又艰辛的过程。
现在的岗位主要负责网站建成之后遇到各式各样的小问题。问题虽小，但是处理起来一点都不能马虎。所以要源源不断的补充知识，学校学习的书本知识和现在工作中运用到的理论基本脱节，如何让自己在工作中处理问题游刃有余，那就需要我们不断的扩充自己的眼界。最好的方法就是我们现在就开始一起来学习一些html的基本理论吧！
客户网站建成之后，在后台编辑器里面编辑文本上传至网页上，文本里面有图片时，有些客户就会遇到图片与文本的布局不是自己想要的效果，发生错位等情况，这时要如何处理呢？今天我们就简单的探讨一下这个问题。
例子：从别处复制文章与图片之后在编辑框内编辑图片挪不动，前台显示不错位的情况如何处理呢？如下图：想让图片环绕文字显示，但是在编辑框内图片根本挪动不了。

处理这个问题首先从别的网页拷贝下来的图文黏贴进文本文档，这样可以过滤掉大部分的样式，如果这样还是不可以，那就点击编辑框里面可以进行代码编辑的按钮进入代码页面对图像编辑。我们可以利用align，margin,padding属性来控制图像的位置与文字之间的距离。
例子：1、利用align属性控制文字与图像的位置
<html>
<body>
<p>
<img src ="/jianzhu.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
? 2、利用margin和padding来控制文本与图像的内外边距的大小
<html>
<head>
<style type="text/css">
p.margin1 {margin: 2cm 4cm 3cm 4cm} （外边距：上右下左的外边距分别为2cm，4cm，3cm，4cm）
p.margin2 {margin: 2cm 3cm 4cm} （外边距：上右下的外边距分别为2cm，4cm，3cm）?
p.margin3 {margin: 2cm 4cm } （外边距：上下，左右的外边距分别为2cm，4cm）?
p.margin4 {margin: 2cm }??? （外边距：所有的外边距分别为2cm）?
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin1">（外边距：上右下左的外边距分别为2cm，4cm，3cm，4cm）</p>
<p class="margin2"> （外边距：上右下的外边距分别为2cm，4cm，3cm）</p>
<p class="margin3">（外边距：上下，左右的外边距分别为2cm，4cm）</p>
<p class="margin4">（外边距：所有的外边距分别为2cm）</p>???
<p>这个段落没有指定外边距。</p>
</body>
</html>

<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
td.test3 {padding: 0.5cm 2.5cm 0.5cm}
td.test4 {padding: 0.5cm 2.5cm 0.5cm 2.5cm ?}?
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test3">
这个表格单元的上和下内边距是分别是0.5cm，右内边距是 2.5cm。
</td>
</tr>
</table>?
<br />
<table border="1">
<tr>
<td class="test4">
这个表格单元的上右下左的距离分别为0.5cm 2.5cm 0.5cm 2.5cm?。
</td>
</tr>
</table>
</body>
</html>