Есть ли способ добавить интервал слева и справа от HTML-элемента?

ProgramBox

Есть ли способ добавить интервал слева и справа от HTML-элемента?

Post author:admin
Запись опубликована:14 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь добавить интервал слева и справа от пользовательского элемента. Пожалуйста, скажите мне, если нужно предоставить больше. В 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 Webpage/About Me.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 Webpage/About Me.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>

1. В вашем коде есть многочисленные опечатки из-за незакрытых тегов. <p style="text-align:center; list-style-position:inside;" > например, требуется закрытие. Тангенциально, почему у вас есть ol символ a ul ? Не слишком ли это излишне? По какой-либо конкретной причине вы смешиваете встроенные style атрибуты с правилами CSS в выделенном style теге? Я бы рекомендовал вам решить эти и другие проблемы, не связанные с вашим запросом, чтобы они не отвлекали от сути вашего вопроса.

Ответ №1:

Просто добавьте немного отступов, как показано во фрагменте ниже. Лучше сделать контейнер похожим <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>

Ответ №2:

В css сделайте это:

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

Вот пример: https://repl.it/repls/TintedFlickeringStatistic#style.css .