CODEWITHSUNDEEP
htmlcss
Risker
Risker

Reputation: 479

Padding only applies to me in 1 div, why?

I write the same padding for 2 different div elements and it only applies to 1 of them.

I already tried applying the style to different elements, using margin, creating more divs, using width and probably more things, but can't find the solution. Also, is this a correct way of doing it? Should I use buttons instead?

HTML

    <div class="login">
        <div class="button1"><p class="pButton"><a href="#">Login to see list</a></p></div>
        <div class="button2"><p class="pButton"><a href="#">Login to view profile</a></p></div>
    </div>

CSS 

.login {
  text-align: center;
  margin-right:2px 20px;
}

.button1 {
  display: inline-block;
  padding:2px 10px;
}

.button2 {
  display: inline-block;
  padding:2px 10px;
}

.button1, .button2 a {
  background-color: #b0f4e6;
}

Upvotes: 0

Views: 131

Answers (4)

fdurna
fdurna

Reputation: 328

.login {
  text-align: center;
}
.button1 ,.button2{
  display: inline-block;
}
.button1 a, .button2 a {
  background-color: #b0f4e6;
  padding:20px 10px;
  color:black;
}
<div class="login">
        <div class="button1"><p class="pButton"><a href="#">Login to see list</a></p></div>
        <div class="button2"><p class="pButton"><a href="#">Login to view profile</a></p></div>
</div>

can u try this ?
that's all...

Upvotes: 0

Salsabila Multazam
Salsabila Multazam

Reputation: 43

better u write ur code like this:

HTML

    <div class="button1"><p class="pButton"><a href="#">Login to view List</a></p></div>
</div>
<div class="login">
    <div class="button2"><p class="pButton"><a href="#">Login to see Profile</a></p></div>

CSS

.button1 , .button2 {

background-color: #b0f4e6;
}

Upvotes: 0

kyun
kyun

Reputation: 10264

both div tags have same padding, and I've just found something wrong in your code.

in your CSS code,

/* It means applying background-color at .button1 and .button2 > a */
.button1, .button2 a {
  background-color: #b0f4e6;
}

so, this codes would be like it

.button1, .button2{
  background-color: #b0f4e6;
}

/* OR */
.button1 a, .button2 a{
  background-color: #b0f4e6;
}


.login {
  text-align: center;
  margin-right: 2px 20px;
}

.button1 {
  display: inline-block;
  padding: 2px 10px;
}

.button2 {
  display: inline-block;
  padding: 2px 10px;
}

.button1,
.button2 {
  background-color: #b0f4e6;
}
<div class="login">
  <div class="button1">
    <p class="pButton"><a href="#">Login to see list</a></p>
  </div>
  <div class="button2">
    <p class="pButton"><a href="#">Login to view profile</a></p>
  </div>
</div>

Upvotes: 2

XuWang
XuWang

Reputation: 359

you can try [attribute^=value] selector. in this case , will use [class^="button"]

Upvotes: 0

Related Questions