Html Question posted in
Some basic documentation can be found here.

Html – Why the width and height are still ignored despite the display:block;?

I want to create a rectangle with empty span, but width and height are ignored.

html code

<h1 class="intro-titel intro-titel-spiciy">
     PRORERTY
     <span class="span"></span>
</h1>

css code

.intro-titel{
    font-size: 80px;
    font-weight: 750;
    color: #fff;
}

.intro-titel-spiciy{
    background-color: #FFB703;
    color: black;
    font-size: 87px;
}

.span{
    width: 50px;
    height: 100%;
    background-color: #fff;
    border: 1px solid black;
}

According to the things I searched, I expected it to be fixed by adding the following items

first attempt

.span{
    display:block;
    /* and I try display:inline-block; but it dosen't work*/
    /* other styles */
}

second attempt

span.product__specfield_8_arrow{
    display: inline-block;
}

but none of them didn’t work.

Tags:

2

Answers


  1. 0

    You can make 2 changes:

    1. Add a height to .intro-titel like this:
    .intro-titel{
    font-size: 80px;
    font-weight: 750;
    color: #fff;
    height: 100px;  /* This! */
}
    1. Add display to .span like this:
    .span{
    width: 50px;
    background-color: #fff;
    border: 1px solid black;
    height: 70%;
    display: inline-block;  /* This! */
}

    Which should work now.

    Login or Signup to reply.
  2. 0

    Applying width & height to a span is troublesome. Generally what I do is don’t use span tag instead use normal div add respective class to it and it works fine in your code too. Just replace span with div in your html and it will work no additional css or anything. Below is working example.

    body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  color: white;
  width: 100%;
  height: 100vh;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-titel {
  font-size: 80px;
  font-weight: 750;
  color: #fff;
}

.intro-titel-spiciy {
  background-color: #FFB703;
  color: black;
  font-size: 87px;
}

.span {
  width: 50px;
  height: 100%;
  background-color: #fff;
  border: 1px solid black;
}
    <div class="mainDiv">
  <h1 class="intro-titel intro-titel-spiciy">
    PRORERTY
    <div class="span"></div>
  </h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search