How can I position rectangles around my text? I know I can make a border around it with the border attribute in CSS, but I want to customize how far it is from the text, and the size...

Any suggestions? :slight_smile: Thanks!


Hey Goldendraws,

Padding will let you control how far from the text the border is.
border-width or the first part of the value for border will control how large it is. Example:

border-width: 3px;
/* is the same as */
border: 3px /* style */ /* color */;

I hope this helps :)
And please let me know if you've got any more questions about this :)


padding is the spacing inside the box, so if you add: padding: 10px; the text will be 10px away from the border, you might want to consider to use box-sizing: border-box (this makes the border and padding part of the width and of the element and prevents it the box becomes bigger then your specified width


Like zystvan says, if you have any further questions, feel free to ask, if you have a specific problem, please also include your code


I've got another question; I'm trying to remake the website.. so below the nav bar I wanted to add a shadow affect, with a really thin rectangle... (Look at the top of your screen).

Whatever I do though.. It doesn't work.. Here's the HTML and CSS code:

    <div class="navigationMenu">  
        <ul class="pull-left">
            <div class="logo">
                <a href="index.html">
                    <img src="" />
        <ul class="pull-right">
                <a href="profile.html">
                    <div class="profileIcon">
                    <img src="" height = "50" width = "50">

.navigationMenu ul {
    background-color: white;

.navigationMenu a {
  color: #393D60;
  font-size: 15px;
  font-weight: normal;
  text-transform: uppercase;

.navigationMenu li {
  display: inline;

.navigationMenu {
    position: relative;

.navMenuLogIn a {
    margin-top: 500px;  
    height: 100px

a:hover {
  text-decoration: none;
a {
  text-decoration: none;

.underlineA {

a:click {
  text-decoration: none;
a {
  text-decoration: none;

.profileIcon {
    padding-right: 121px;
    margin-top: 10px;
    width: 20px;
    height: 20px;

.logo {
    margin-top: 14px;

What can I do to make it work?


if you want to add a shadow effect, why do you not use the box-shadow property?


Because as you can tell by now, I love to over-complicate things. :laughing:


i see. @zystvan, would you be so nice to helpen goldendraws? i simple do not understand what he is trying to achieve, i find his code overcomplicated, i don't do overcomplicated



If you deliberately do something the hard way for no reason other than that you feel like it, you're not really going to go anywhere as a programmer.
If you look at the code for this site's header's shadow, they use this:

box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);

If you're still determined to do it the hard way, you might be able to create a pseudo ::after element from the header, and give it a background with a linear gradient going from top to bottom. Do some research on "CSS linear-gradient".