CODEWITHSUNDEEP
htmlcss
Jake_the_camper
Jake_the_camper

Reputation: 90

how do i get my div tag inside my borders?

I am working on a new project and have run into the problem that when I add borders to my div tag the div shifts down so that it is no longer in the borders.

div {
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 30px;
  line-height: 50px
}
.gases {
  background-color: limegreen;
}
.blocks {} .border {
  border: 5px solid black;
}
<div class="border">
  <div class="periodOne groupOne gases blocks" id="hydrogen">
    <p>H</p>
  </div>
</div>

Upvotes: -1

Views: 32

Answers (4)

ColorWin
ColorWin

Reputation: 56

By user agent stylesheet, element have default margin-top and margin-bottom, you need to remove them.

div {
   height:50px;
   width:50px; 
   text-align:center;  
   font-size: 30px;
   line-height:50px
}
.gases {
   background-color:limegreen;
}
.border{
   border:5px solid black;
   box-sizing:border-box;
}

.border p{
   margin: 0;
}
<!-- remove p element default margin-top and margin-bottom -->
<body>
   <div class="border">
  <div class="periodOne groupOne gases blocks" id="hydrogen">
     <p>H</p>
  </div>
   </div>
</body>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

remove the p tag (causes extra margins), separate the div rule into separate rules for the two divs and be careful to use things like line-height etc. only in one of those elements. Here's the code:

.a {
  height: 50px;
  width: 50px;
}
.b {
  text-align: center;
  font-size: 30px;
  line-height: 50px
}
.gases {
  background-color: limegreen;
}
.border {
  border: 5px solid black;
}
<div class="a border">
  <div class="b periodOne groupOne gases blocks" id="hydrogen">
    H
  </div>
</div>

Upvotes: 0

Edmar Miyake
Edmar Miyake

Reputation: 12390

.border { display: inline-block}
.blocks {
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  
}
.gases {
  background-color: limegreen;
}
.blocks {} .border {
  border: 5px solid black;
}
p {margin: 0}
<div class="border">
  <div class="periodOne groupOne gases blocks" id="hydrogen">
    <p>H</p>
  </div>
</div>

Upvotes: 0

heyitsjhu
heyitsjhu

Reputation: 971

There's likely some margin set on your p tag. Try adding the below line of CSS to remove the margin.

.border p {margin: 0;}

JSFiddle: https://jsfiddle.net/5w6jt0ru/1/

Upvotes: 1

Related Questions