Text is too close to the edge of col or box-CodePudding

Does any of you know how to add padding to the text? Here is the image.

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


<!-- Body --> 
<div >
  <div >
    <h2 >Za sve vremenske prilike</h2>
    <br>
    <p >Grijanje i Hlađenje</p>
    <p >Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
  <div >
    <img src="https://via.placeholder.com/200.jpg" >
  </div>
</div>

CodePudding user response：

This is easily fixable with the padding property being applied to the div that contains the text elements, but one side effect that you may not like is that the box can get bigger in order to apply the space around the inner text elements this too can be easily fixed by telling your css file that: box-sizing: border-box I'm assuming that you're using tailwind and in tailwind those properties are set like the following: p-[2,4,...] box-border

in short:

<div >
<h2 >Za sve vremenske prilike</h2>
<br>
<p >Grijanje i Hlađenje</p>
<p >Zgrada je opremljena najsavremenijom tehnologijom.</p>

CodePudding user response：

Just add a padding class to the <div> that contains text such as p-5

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


<!-- Body --> 
<div >
  <div >
    <h2 >Za sve vremenske prilike</h2>
    <br>
    <p >Grijanje i Hlađenje</p>
    <p >Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
  <div >
    <img src="https://via.placeholder.com/200.jpg" >
  </div>
</div>

CodePudding user response：

You could try adding a <div> tag for the <p> elements so for example:

<div >
    <p >Grijanje i Hlađenje</p>
    <p >Zgrada je opremljena najsavremenijom tehnologijom.</p>
</div>

Inside your CSS folder you would want to do this:

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 */
}

You could also do:

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 */
}

There is also margin that you could use for padding:

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 */
}

Lastly you could just not create a div and just do:

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

and your HTML must be like this:

 <p >Grijanje i Hlađenje</p>
 <p >Zgrada je opremljena najsavremenijom tehnologijom.</p> <!--- Use any css for the second one or the same --->

I hope this helped you understand different ways to align text and use padding