Wel eens afgevraagd wat het verschil is tussen display:inline, display:block en display:inline-block?

In woorden, inline vs block vs inline-block

Gevonden via Google: CSS display: inline vs inline-block.

Inline elements:

  • respect left & right margins and padding, but not top & bottom;
  • cannot have a width and height set;
  • allow other elements to sit to their left and right.

Block elements:

  • respect all of those;
  • force a line break after the block element.

Inline-block elements:

  • allow other elements to sit to their left and right
  • respect top & bottom margins and padding
  • respect height and width

Visueel, inline vs block vs inline-block

Gevonden via Google: What is the difference between display: inline and display: inline-block?.

Imagine a element inside a

. If you give the element a height of 100px and a red border for example, it will look like this with…

Inline elements:

display:inline

display:inline

Block elements:

display:block

display:block

Inline-block elements:

display:inline-block

display:inline-block

One comment on “Verschil tussen inline en inline-block!

  • Beste Willem-Siebe Spoelstra,

    Allereerst bedankt voor de artikelen/informatie op deze site, staan een hoop nuttige en interessante dingen m.b.t. WordPress en alles eromheen!
    Ik ben zelf een site aan het bouwen en heb imiddels 99% van de dingen die ik wilde voor elkaar gekregen m.b.h. plug-in’s, de php en de style.CSS.
    Echter ik krijg ik 1 ding niet voor elkaar: het naast elkaar zetten van 2 widgets (een zoekbalk en een prijsfilter) in de under header.
    Ik heb van alles geprobeerd qua margin, padding etc maar de zoekbalk wil niet naast de filter (ik kan hem er wel enigszins naast krijgen maar niet op dezelfde hoogte).
    En ook het naar rechts verplaatsen gaat maar tot ongeveer 2/3 van de under header oftewel er blijft een groot deel gewoon leeg, wanneer ik hem verder wil verplaatsen wordt hij simpelweg kleiner i.p.v. dat hij naar rechts verplaatst
    Ik kan nergens een oplossing vinden en hoop dat jij er is naar wil kijken?
    Dit is de style.CSS:

    */

    div#feedbackTabOuter {
    z-index: 999;
    }
    .widget form {
    align:left;
    }
    .feedbacklink {
    padding-top: 5px;
    }
    .product-feedbacklink {
    margin-left: 15px;
    float: left;
    }

    ul.products li.product .button.product_type_simple {
    display: none;
    }
    .quantity {
    display: none;
    }
    .navbar-custom .nav li > a {
    font-size: 10px;
    }
    .xoo-qv-container {
    border-radius: 12px;
    }
    .xoo-qv-opac {
    opacity: 0.2;
    }
    .xoo-qv-button {
    width: 50%;
    }

    .add-to-cart-button-wrap {
    display: none;
    }
    .quick_view_product_simple_addtocart_container.quick_view_product_addtocart_button_container {
    display: none;
    }
    div#cboxOverlay {
    opacity: 0.2 !important;
    }

    #woocommerce_price_filter-8 {
    display: block;
    width: 50%;
    }
    #autocomplete-3 {
    display: block;
    width: 22%;
    }
    li:before {
    display: none;
    }

    .bg-dark {
    background-color: #3a3a3a !important;
    }
    body.custom-background {
    background-color: #3a3a3a !important;
    }
    .module-small.bg-dark.shop_isle_footer_sidebar {
    padding-top: 10px;
    Padding-bottom: 15px;
    }
    footer.footer.bg-dark {
    display: none;
    }
    .navbar-custom .nav > li > a:hover, .navbar-custom .nav .open > a, .navbar-custom .nav .open > a:hover {
    color: #018c6d;
    }
    .woof_products_top_panel li a {
    display: none;
    }
    .navbar-custom .nav li > a {
    color: #777;
    }
    .navbar-cart-inner {
    display: none;
    }
    .header-search {
    display: none;
    }
    .widget input[type=search], .widget input:not([type=submit]), .widget textarea {
    width: 22%;
    }
    .widget input[type=submit] {
    padding: 8px 25px;
    }

    @media screen and (max-width: 3000px) {
    li#woocommerce_price_filter-8 {
    padding-top: 85px;
    padding-left: 10%;
    padding-right: 15%;
    margin-left: 15px;
    margin-right: none;
    margin-bottom: 15px;
    background-color: #3a3a3a;
    }
    li#autocomplete-3 {
    padding-top: 150px;
    padding-left: 95%;
    padding-right: 5%;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    background-color: #3a3a3a;

    }

    }

    .widget {
    list-style: none;
    }
    h2.widgettitle {
    display: none;
    }
    section.woocommerce-page-title.page-header-module.module.bg-dark {
    display: none;
    }
    .page-header-module.module {
    padding: 0px 0 0px;
    }
    .navbar-custom {
    background-color: #ffffff;
    }
    .page .navbar-custom {
    background-color: #ffffff !important;
    }
    .onsale {
    min-width: 90px !important;
    min-height: 90px !important;
    border-radius: 50px !important;
    padding: 15px !important;
    background-color: #018c6d !important;
    }

    Alvast super bedankt!

    M.v.g,

    Nick

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *