Span with Display Block

Span display inline-block not working properly

The easiest way is to use CSS Flexbox. Make your <span> a flex container instead of inline-block, just like this:

span {
  display: flex;
}

Have a look at the snippet below:

/* CSS used here will be applied after bootstrap.css */input[type=text].vtooltips {        position: relative;        display: inline;        height: 20px;    }    .vspan {        /*position: absolute;*/        display:none;        font-size:12px;         font-family: Arial;         color:white;        border-radius:3px;         background: #DC000C;        width:50%;        height: 20px;        border: 1px solid #6D6D6D;        line-height: 0px;        text-align: center;        /*visibility: hidden;*/        border-radius: 4px;        box-shadow: 2px 2px 0px #AFB1B1;        margin-left:5px;        line-height:15px;            }.validationInput,.validationInput:focus,.validationInput:hover {    background-color: #FFFFE0!important;    border: 1px solid red!important;    height: 20px}
.wrap span:first-child {    display: flex;    position: relative;    overflow: hidden;    width: 100%}
.wrap span:first-child .input-holder:after {    content: '';    position: absolute;    top: -5px;    right: -5px;    width: 0;    height: 0;    border-width: 5px;    border-color: red;    border-style: solid;    transform: rotate(45deg);    box-shadow: 0 0 0 1px #FFFFE0}
body {  margin: 30px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="col-lg-3 wrap">  <span>    <span class="input-holder">    <input type="text" class="mandatoryText vtooltips form-control textbox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName"></span>    <span class="vspan" style="display: inline-block;">Please enter Name</span>   </span></div>

Difference between DIV as-is and a SPAN with display:block

Yes they are different.

Even though you style a span with display: block you still can't put block-level elements inside it:

<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>

The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.

Span tag with display:inline rendering as display:block

You aren't able to easily override in your CSS because the element is being set to display:block inline (within your HTML), likely by the framework you are using (hard to say without further detail).

As such you will either need to prevent this from being set, remove it (i.e. using JS) or override it in your CSS.

To override in your CSS, you will need to use !important, e.g:

#trnfrm{
  display:inline!important;
}

That said, note that the use of !important is not recommended. Ideally you should look to fix the root cause.

When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.

display: inline-block, span does not align properly

The default veritcal alignment of inline elements is baseline. So change it to something that fits what you need, like middle.

.foo {  width: 500px;  height: 50px;  background-color: powderblue;  display: inline-block;}
.img {  width: 50px;  height: 50px;  vertical-align: middle;}
.bar {  vertical-align: center;}

<div class="foo">  <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt="Sample Image">  <span class="bar"> Lorem ipsum dolor sit amet </span></div>

---

Related Topics