CSS, text align and padding right

CSS, text align and padding right
0.0 0

#1

I have a

that I want to text-align right but with padding-right of 5-10px. Can’t figure out the solution. Any help from the CSS gurus would be much appreciated …

the css snippet:


.screen {
  height: 70px; 
  width: 96%; 
  color: #F0F0F0;
  font-size: 50px; 
  line-height: 70px; 
  text-align: right;
  margin-right: 5px;
  border: 1px solid #b4b39d;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  box-shadow: 
    7px 10px 34px 1px 
    rgba(0, 0, 0, 0.68), 
    inset -1px -6px 12px 0.1px 
    #89847e;
}

and my html snippet:

<div class="screen">0</div>

#2

If you are using bootstrap, you can use <div class ="screen text-right>0</div> and you should be able to add padding to that selection with the your settings in css. I hope that helps.


#3

Sorry if I don’t understand correctly but don’t you already have padding ?


#4

I’m not using bootstrap :frowning:


#5

the padding doesn’t work … hence my question …


#6

Do you have a codepen.io link?


#7

#8

I’m sorry the Codepen just gave me context, never-mind me.


#10

Ok so just plane padding takes four inputs for all directions and you are only padding the top. If you only need to pad right use padding-right.


#11

padding-right moves the whole <div> container, I need to pad the text within, kinda like text-align but with fine-tune(able) like top, right, bottom, left does in everything else


#12

I was able to get your desired result from changing the width to 270 and the padding right to 20 but idk where the other 10px is going towards your width since only 290 of it is “onscreen”.


#13

yeah, I’m stuck now … the 270 width change smashes it up too much …


#14

If by “mash” you mean you need more space, you could always add to the padding and lessen the width by even amounts

width: 270
padding: 20

to

width 260
padding 30

I’m sorry that’s all I got for now :confused:


#15

all is well boss, it’ll work itself out or it won’t … time to go sit by the fire


#16

fixed by adding Bootstrap CSS … didn’t want too, since it is being dropped out of fashion, but it did resolve the alignment issue … thanks to @sebalex11 and @trvon :thumbsup:


#17

the “mostly” completed calculator -