文本太接近中文本或框的边缘。

Question

你们中有人知道如何在文本中添加填充物吗？这是图像。

​

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body --> 
<div class="row no-gutters">
  <div class="col-md-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
    <br>
    <p class="mb-0 text-white">Grijanje i Hlađenje</p>
    <p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-md-6 order-first order-md-last">
    <img src="https://via.placeholder.com/200.jpg" class="w-100 h-100">
  </div>
</div>

​

Answer 1

这很容易通过应用于包含文本元素的div的填充属性来修正，但是您可能不喜欢的一个副作用是，为了应用内部文本元素周围的空间，这个框可以变得更大，这也可以很容易地通过告诉css文件: box - side :边框-box-box，我假设您使用的是顺风，这些属性设置如下: p-2,4，.箱形边框

简言之：

<div class="col-md-6 d-flex align-items-center flex-column justify-content-center bg-dark box-border p-4">
<h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
<br>
<p class="mb-0 text-white">Grijanje i Hlađenje</p>
<p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>

Answer 2

只需将一个填充类添加到包含文本(如<div> )的p-5中。

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body --> 
<div class="row no-gutters">
  <div class="col-md-6 d-flex align-items-center flex-column justify-content-center bg-dark p-5">
    <h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
    <br>
    <p class="mb-0 text-white">Grijanje i Hlađenje</p>
    <p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-md-6 order-first order-md-last">
    <img src="https://via.placeholder.com/200.jpg" class="w-100 h-100">
  </div>
</div>

​

Answer 3

您可以尝试为<div>元素添加一个<p>标记，例如：

<div class="example">
    <p class="mb-0 text-white">Grijanje i Hlađenje</p>
    <p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>
</div>

在CSS文件夹中，您可能希望这样做：

div.example p {
padding: 5px 0px 0px 5px; /* top, right, bottom, left */ /* you can also use % and auto aswell as vh cm in */
text-align: center; /* left, center, right */
/* justify-content: left; | left, center, right */
/* float:left;| left, right */
}

你也可以：

div.example p {
padding-left: 5px; /* you can also use % and auto aswell as vh cm in */
padding-top: 5px; /* you can also use % and auto aswell as vh cm in */
padding-bottom: 0px; /* you can also use % and auto aswell as vh cm in */
padding-right: 0px; /* you can also use % and auto aswell as vh cm in */
}

您还可以使用margin来填充：

div.example p {
margin-top: 5px; /* you can also use % and auto aswell as vh cm in */
margin-left: 5px; /* you can also use % and auto aswell as vh cm in */
margin-right: 0px; /* you can also use % and auto aswell as vh cm in */
margin-bottom: 0px; /* you can also use % and auto aswell as vh cm in */
}

最后，您只需创建一个div即可：

p.text-padding {
padding: check above;
color: #ffffff; /* text color */
float: where you want;
text-decoration: none; /* underline */
}

您的HTML必须是这样的：

 <p class="mb-0 text-white text-padding">Grijanje i Hlađenje</p>
 <p class="mb-0 text-white text-padding">Zgrada je opremljena najsavremenijom tehnologijom.</p> <!--- Use any css for the second one or the same --->

我希望这能帮助你理解对齐文本和使用填充的不同方法。