CODEWITHSUNDEEP
htmlcss
while true
while true

Reputation: 856

how to avoid element overlapping

Demo

enter image description here

I noticed some times elements overlap i'm not sure why.i have removed margins from top element (p tag) so there is no way this is margin collapse.so what is it actually?

i can fix that by adding display:inline-block.but is there any better ways to avoid that ? 

.ui-btn {
  border: 2px solid #ffffff;
  border-radius: 30px;
  background-color: #18aff4;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: white;
  padding: 18px;
}

p {
  margin: 0;
  padding: 0;
}
<div class="text">
  <p ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <a class="ui-btn ">Sign up</a>
</div>

Upvotes: 0

Views: 66

Answers (4)

Hash
Hash

Reputation: 8020

You can use any margin-bottom , float , inline-block but </br> works too.

.ui-btn {
  border: 2px solid #ffffff;
  border-radius: 30px;
  background-color: #18aff4;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: white;
  padding: 18px;
}

p {
  margin: 0;
  padding: 0;
}
<div class="text">
  <p ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</br>
  <a class="ui-btn ">Sign up</a>
</div>

Upvotes: 2

Phani Kumar M
Phani Kumar M

Reputation: 4590

You can add display: inline-block; to .ui-btn to display it after paragraph.

<style type="text/css">
.ui-btn {
  border: 2px solid #ffffff;
  border-radius: 30px;
  background-color: #18aff4;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: white;
  padding: 18px;
  display: inline-block;
}
p{
  margin: 0;
  padding:0;
}
</style>

<div class="text">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <a class="ui-btn">sign up</a>
</div>

Upvotes: 2

Sudheer KB
Sudheer KB

Reputation: 1606

Anchor tag is inline tag by default give float: left; in css

.ui-btn {
  border: 2px solid #ffffff;
  border-radius: 30px;
  background-color: #18aff4;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: white;
  padding: 18px;
  float: left;
}

Upvotes: 0

Name
Name

Reputation: 408

.ui-btn {
  border: 2px solid #ffffff;
  border-radius: 30px;
  background-color: #18aff4;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  color: white;
  padding: 18px;
}
p{
  margin:0;
  padding:0;
  margin-bottom:40px;
}
<div class="text">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <a class="ui-btn">sign up</a>
</div>

Padding on <a> tag didn't count as a space. So add a p{margin-bottom:40px;} to your <p> will create a gap between it.

Upvotes: 0

Related Questions