Question

我正在尝试在自定义元素的左侧和右侧添加间距。如果需要提供更多信息，请告诉我。在CSS中，我将所有内容居中。

<!DOCTYPE html>
<html lang="en">
<style>
h1 {text-align: center;}
small {text-align: center;}
h2 {text-align: center;}
p {text-align: center;}
br {text-align: center;}
br {text-align: center;}
ul {text-align: center;}
li {text-align: center;}
');
</style>

<head>
    <meta charset="UTF-8">
    <title>Cooper's Webpage!</title>
    <link type="text/css" rel="stylesheet"
    href="css/my-first-stylesheet.css" />
    <link
    href="https://fonts.googleapis.com/css?family=Ibarra Real Nova rel='stylesheet">
</head>
<body style="padding-left: 100;">
<h1>Cooper's Webpage</h1>

<p style="color: #EC4E20;font-size:15px;font-family 'Light';font-weight: 100; font-style: italic; font-size: 17px;">The Website that Cooper Codes</p>

<h2>Cooper Poem</h2>

<p>Cooper is Cool.
Here is a Poem.<p>

Cooper.<br>
He smells like Carrots.<br>
Even though he eats Bananas.
<h2>Coolness Reasons</h2>
<p>This is all the reasons Cooper is Cool.</p>
<p style="text-align:center; list-style-position:inside;"
<ul>
<ol style="text-align:center; list-style-position:inside;">
<li>He is smart</li>
<li>He smells Good</li>
<li>He likes to Code</li>
<li>He has good Friends</li>
<li>He makes Music</li>
<li>He is nice</li>
</ol>
</ul>
</p>
</p>
</p>
<center>
<div>
<a class="button" href = "file:///Users/Prokids/Desktop/Code/Cooper's%20Webpage/About%20Me.html"; target="_blank"; style="display: table-cell;">
About Me </a>
<p target="_blank"; style="display: table-cell; opacity: 0;";>12</p>
<a class="button" href = "file:///Users/Prokids/Desktop/Code/Cooper's%20Webpage/About%20Me.html"; target="_blank"; style="display: table-cell;">
About Me 2 </a>
</center>
</div>
<h2>Mad Libs</h2>
<p style="font-size:15px;font-family 'Light';font-weight: 100; font-style: italic; font-size: 17px;">Letter from Camp</p>
<center>
<p>
<div style="padding-left: 100;">
<madlibs>
Dear <Input Type="Text" Style="Width: 50px">, I am having a
<Input Type="Text" Style="Width: 50px"> time at camp. The counselour is
<Input Type="Text" Style="Width: 50px"> and the food is
<Input Type="Text" Style="Width: 50px"> . I met
<Input Type="Text" Style="Width: 50px"> and we became
<Input Type="Text" Style="Width: 50px"> friends. Unfortunately,
<Input Type="Text" Style="Width: 50px"> is
<Input Type="Text" Style="Width: 50px"> and I
<Input Type="Text" Style="Width: 50px"> my
<Input Type="Text" Style="Width: 50px"> so we couldn`t go
<Input Type="Text" Style="Width: 50px"> like everybody else. I need more
<Input Type="Text" Style="Width: 50px"> and a
<Input Type="Text" Style="Width: 50px"> sharpener, so please
<Input Type="Text" Style="Width: 50px">
<Input Type="Text" Style="Width: 50px"> more when you
<Input Type="Text" Style="Width: 50px"> back.
Your <Input Type="Text" Style="Width: 50px">,
<Input Type="Text" Style="Width: 50px">
</madlibs>
</p>
</div>
</center>
</body>
</html>

Answer 1

在CSS中执行此操作：

.element-name {
margin-left: 100px;
margin-right: 100px;
}

以下是示例：https://repl.it/repls/TintedFlickeringStatistic#style.css。

Answer 2

只需添加一些填充，如下面的代码片段所示。最好制作一个<div class="container">之类的容器，并将所有页面元素添加到该容器中。容器可以具有类似于下面示例的填充，以在元素周围留出空间。

我使用了padding，如果您有想要保留的背景，但是在背景颜色中为元素添加了间距，则在下面使用它很方便。

您也可以使用margin属性，该属性可以像填充元素一样增加元素的间距，但它会移动整个元素，而不是在容器周围增加空间。

.para {
  border: 2px solid black;
  margin: auto;  
  padding: 0 40px;
  text-align: center;
}

.para1 {
  border: 2px solid black;
  margin: auto;  
  padding: 40px;
  text-align: center;
}

<p class="para">
This is a paragraph that has 40 pixels padding on left and right
</p>
<br/>
<br/>
<p class="para1">
This is a paragraph that has 40 pixels all around
</p>

有没有一种方法可以在HTML元素的左侧和右侧添加间距？

2 个答案: